読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

モバイルファーストを意識したレスポンシブデザインサイトの制作

f:id:yachin29:20151120003303p:plain

バイルファースト

バイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

とありますが、モバイルファーストとは単にスマホレイアウトから作っていく、という作業手順の事では無く、ユーザーにとって必要なコンテンツや情報をスマホサイトにしっかりと入れ、見易さや使い易さも考慮して作っていく事が大切です。簡単に言うとスマホサイトで完結出来ているか、という事で、それをPCでみた際にも違和感が無いように手直しして行く事です。

業種にもよりますが、最近はPCよりもスマホからのアクセス数が多いwebサイトも珍しくありません。そもそもPCを持っていない人にとっては、スマホでネットを見る、という選択肢しか無いですし、PCを持っていても「ファーストスクリーン」がスマホ、というユーザーも少なくありません。なので、スマホサイトでもしっかりとユーザーのニーズに応える必要が出て来ます。

✕ PCサイトから余分な部分を削る
◯ スマホサイトで必要な物をしっかりと入れ、PCレイアウトで見ても違和感の無いように調整する

yachin29.hatenablog.com


バイルファーストインデックス (MFI)

googleが今回発表した「モバイルファーストインデックス (MFI)」とは、簡単に言うと「今まではスマホからのGoogleの検索結果でもPC版のページを評価の中心とした結果を表示させていましたが、これからの検索結果はモバイル版ページが評価の中心となり、優先順位が逆転します」
という事です。

この授業でやっているように「レスポンシブデザイン」や「動的な配信」を行っているサイトで、主要なコンテンツやマークアップがモバイル版とデスクトップ版で同一である場合は、何も変更する必要はありません。
ただ、考え方として上記でも書いたように、スマホサイトでのコンテンツの見せ方・取捨選択やUI・UX設計が今後より重要になっていきます。


Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスに向けて


www.suzukikenichi.com



使用する画像
http://yachin29.webcrow.jp/netsmart.zip


使用するテキスト

株式会社ネットスマート

メニュー

サービス紹介
実績紹介
会社概要
採用情報


メンテナンスのお知らせ


サービスピックアップ

CMS

SEO

ソーシャル

低価格&高機能なCMS導入。
充実の管理画面でサイト運用を効率的に。

検索ワードを短期間で上位表示。
スマートフォンサイトにも対応します。

Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。



サービス紹介

実績紹介

会社概要

採用情報





セミナー

2016年8月11日
テキストテキストテキストテキストテキスト

2016年7月19日
テキストテキストテキストテキストテキスト

2016年7月14日
テキストテキストテキストテキストテキスト

2016年7月10日
テキストテキストテキストテキストテキスト

2016年6月29日
テキストテキストテキストテキストテキスト



お知らせ

2016年3月18日
採用情報を更新しました

2016年3月11日
実績紹介を更新しました

2016年3月1日
サービスが紹介されました

2016年2月25日
社内ブログを開設しました



サイトマップ
プライバシーポリシー
サイトのご利用について
免責事項


©2016 Net Smart Co., Ltd. All rights Reserved.



Androidの不具合

Androidは端末ごとに仕様が違う事が多く、細かい不具合が多々あります。「これをすればOK」という防止策はあまりなく、不具合が起こる度にトライ&エラーが必要になります。

ここではAndroid特有の、a要素にdisplay:blockを指定し、タップした時にハイライトが正しく表示されない(リンク自体は効いています)という不具合を直す為に、

<li class="service"><a href="#"><div>サービス紹介</div></a></li>
  <li class="proven"><a href="#"><div>実績紹介</div></a></li>
  <li class="corporate"><a href="#"><div>会社概要</div></a></li>
  <li class="recruit"><a href="#"><div>採用情報</div></a></li>

のように、a要素の中にdivを入れることで、この不具合を回避することが出来ます。




html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ネットスマート|モバイルサイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="apple-touch-icon" href="touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="globalHeader">
<h1>株式会社ネットスマート</h1>
<nav class="menu">
<p id="menuToggle"><span>メニュー</span></p>
<ul>
<li class="service"><a href="#"><div>サービス紹介</div></a></li>
<li class="proven"><a href="#"><div>実績紹介</div></a></li>
<li class="corporate"><a href="#"><div>会社概要</div></a></li>
<li class="recruit"><a href="#"><div>採用情報</div></a></li>
</ul>
</nav>
</header>

<div id="content">
<div id="slide">
<div><img src="img/img_keyvisual_01.jpg" alt="#"></div>
</div><!--/slide-->

<div class="alert">
<p><a href="#">メンテナンスのお知らせ</a></p>
</div><!--/alert-->

<div id="pickup">
<h2>サービスピックアップ</h2>
<ul class="tab">
  <li class="current"><a href="#cms">CMS</a></li>
  <li><a href="#seo">SEO</a></li>
  <li><a href="#social">ソーシャル</a></li>
</ul>
<div class="tabContents current" id="cms">
<div class="round">
<p><a href="#"><img src="img/img_pickup_cms.png" alt="CMS"></a></p>
</div><!--/round-->
<p class="text">低価格&amp;高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
</div><!--/tabContents-->

<div class="tabContents" id="seo">
<div class="round">
<p><a href="#"><img src="img/img_pickup_seo.png" alt="SEO"></a></p>
</div><!--/round-->
<p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p>
</div><!--/tabContents-->

<div class="tabContents" id="social">
<div class="round">
<p><a href="#"><img src="img/img_pickup_social.png" alt="ソーシャル"></a></p>
</div><!--/round-->
<p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--/tabContents-->
</div> <!--pickup-->

<div class="indexBoxes">
<ul>
  <li><a href="#"><div>サービス紹介</div></a></li>
  <li><a href="#"><div>実績紹介</div></a></li>
  <li><a href="#"><div>会社概要</div></a></li>
  <li><a href="#"><div>採用情報</div></a></li>
</ul>
</div><!--/indexBoxes-->

<section class="seminar">
<h2>セミナー</h2>
<dl class="informationLink">
<dt>2016年8月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年6月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</section><!--/seminar-->

<section class="information">
<h2>お知らせ</h2>
<dl class="informationLink">
  <dt>2016年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2016年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2016年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2016年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</section><!--/information-->
</div><!--/content-->

<footer id="globalFooter">
<nav>
<ul>
  <li><a href="#"><div>サイトマップ</div></a></li>
  <li><a href="#"><div>プライバシーポリシー</div></a></li>
  <li><a href="#"><div>サイトのご利用について</div></a></li>
  <li><a href="#"><div>免責事項</div></a></li>
</ul>
</nav>
<p id="copyright"><small>&copy;2016 Net Smart Co., Ltd. All rights Reserved.</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*  共通部分
---------------------------------------------------------- */
body {
  color: #222;
  font: 14px/1.3 ; /*font指定のショートハンド*/
  -webkit-text-size-adjust: 100%; /*古いiOS対応*/
}
a {
  color: #222;
}

/*  レイアウト
---------------------------------------------------------- */
/*  Header  */
#globalHeader {
  background: -webkit-linear-gradient(top, #efefef, #ffffff); /*Android標準ブラウザー 古いiOS Android用 */
  background: linear-gradient(to bottom, #efefef, #ffffff); /*W3C*/
  border-bottom: 1px solid #ccc;
  padding: 10px 5px;
}
#globalHeader h1 {
  width: 120px;
  background: url(../img/logo.png) no-repeat;
  background-size: contain;
  padding: 5px 0 0 5px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
/*  content  */
#slide img {
  max-width: 100%; /*フルードイメージ*/
}

/* Alert */
.alert {
  background: #ddd;
  padding: 10px;
}
.alert p {
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 5px;
}
.alert p a {
  background: url(../img/icon_alert_2x.png) no-repeat 10px 10px; /*最初から高画質ディスプレイ用に大きいサイズを使用*/
  display: block;
  padding: 12px 20px 12px 40px;
  background-size: 21px;
}

/* Pick Up */
#pickup {
  background: url(../img/bg_pickup.jpg) no-repeat;
  background-size: cover;
  color: #fff;
  padding: 5px;
}
#pickup h2 {
  color: #fff;
  font-size: 14px;
  padding: 10px 5px;
}
#pickup ul.tab {
  display: table; /*表組みのようなレイアウトになる*/
  width: 100%;
}
#pickup ul.tab li {
  display: table-cell;
  width: 33.33%;
}
#pickup ul.tab li a {
  background: -webkit-linear-gradient(top, #eeedf2, #717171 4%, #2b2b2b 74%);
  background: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%);
  border: 1px solid #444444;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  margin: 0 2px;
  padding: 10px 0;
  text-align: center;
}
#pickup ul.tab li.current a {
  background: -webkit-linear-gradient(top, #e9e9e9 0%, #ffffff 29%);
  background: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 29%);
  color: #000;
}
#pickup div.tabContents {
  display: none;
  padding: 0 3px; /*ul.tab liに指定したmarginとborderの分、かさを増す*/
}
#pickup div.tabContents.current {
  display: block;
}
#pickup div.round {
  background: -webkit-linear-gradient(top, #fff 14%, #dfdddd 100%);
  background: linear-gradient(to bottom, #fff 14%, #dfdddd 100%);
  border: 1px solid #fff;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  text-align: center;
}
#pickup div.round a {
  background: url(../img/icon_arrow_black_large.png) no-repeat 100% 50%;
  display: block;
}
#pickup .tabContents p.text {
  margin: 10px;
  line-height: 1.4;
}


/* indexBoxとお知らせ */
.indexBoxes {
  margin-bottom: 20px;
}
.indexBoxes ul {
  border-bottom: 1px solid #ccc;
}
.indexBoxes ul li,
section.seminar h2,
section.information h2 {
  background: -webkit-linear-gradient(top, #ffffff, #efefef);
  background: linear-gradient(to bottom, #ffffff, #efefef);
  border-top: 1px solid #ccc;
}
.indexBoxes ul li a {
  display: block;
  background: url(../img/icon_arrow_black.png) no-repeat 100% 50%;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}
.seminar h2,
.information h2 {
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}
dl.informationLink dt {
  color: #777;
  float: left;
  margin-top: 12px;
  padding-left: 10px;
}
dl.informationLink dd a {
   background: url(../img/icon_arrow_gray.png) no-repeat 100% 50%;
  border-top: 1px solid #ccc;
  display: block;
  margin: 0;
  padding: 12px 30px 12px 10em;
}

/*  Footer
---------------------------------------------------------- */
#globalFooter nav ul {
  background: #eaeaea;
  overflow: hidden;
}

#globalFooter nav ul li {
  border: 1px solid #ccc;
  border-bottom: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: 50%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 10px 0;
}
#globalFooter nav ul li:nth-child(odd) {
  border-left: none;
  clear: left;
}
#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: -1px;
}
#globalFooter p#copyright {
  background: #2f2f2f;
  color: #fff;
  font-family: helvetica, arial;
  padding: 15px 0;
  text-align: center;
}


完成例
http://yachin29.webcrow.jp/sp2/