ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

MAKEPO(マケポ)をレスポンシブ対応させたときの手順と注意点など

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
このサイトでは個性豊かなライターさんたちによる貴重なノウハウを「コラム」で、また、「用語集」「マーケティングニュース」など、様々な形式で情報提供しています。ぜひ1人でも多くの方に見ていただければ幸いです。

ところで...そのMAKEPOですが、レスポンシブ対応プロジェクトに先日参戦しました。というわけで、今回はその時の手順と注意点などをご紹介をしたいと思います。

レスポンシブWebデザインについて

手順をお伝えする前に、レスポンシブWebデザインについて少し紹介します。

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズに対して最適化されたージのレイアウト・デザインのことを言います。

1つのHTMLファイルを、CSS(Media Queries)で制御し、異なる画面サイズに応じてページのデザインを調整します。スマホやタブレットの急速な普及によって、レスポンシブ対応は今や必須とさえ言われています。


主なメリット・デメリット

「どんなサイトでもレスポンシブ対応が必要!」とは言い切れません。メリット・デメリットを理解した上で、サイトの構成・デザイン・内容などによって採用するしないを決めるべきでしょう。


メリット
  • 1. 1ソースなので管理・メインテナンスがしやすい
    サイト完成後のメンテナンスで、テキスト修正や画像差し替えなどのメンテナンスにかかる作業時間とミスのリスクを減らすことができます。
  • 2. SEOに有利
    GoogleはレスポンシブWebデザインを推奨しています。 PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、Googleのアルゴリズムがコンテンツを適切にインデックスできるようになるとのことです。


デメリット
  • 1. 構築が複雑になりやすい
    切り替えるレイアウト毎にデザインを用意したり、HTMLコーディングが複雑になったり、そしてなによりもチェックが増えます。従来の制作方法と比べて、設計段階でも構築段階でも複雑になるケースがほとんどです。そのため構築に時間がかかり、費用もかかってしまいます。
  • 2. 読み込み速度が遅くなりやすい
    レスポンシブでは1つのHTMLを使っているので、PCで読み込んでいるものはモバイルでも読み込むということになります。そのためサイズが重い画像を使用している場合などで、スマホサイトの表示速度が著しく落ちてしまうことがよくあります。


MAKEPOをレスポンシブさせたときの手順

さて、ここで本題です。MAKEPOをレスポンシブ対応させたときの手順についてお伝えします。


1. 現サイトのHTML・CSS構成を把握

ソースコードをチェックして、どのようにHTML・CSSが書かれているのかをまずはチェックします。
code-check.jpg

2. モバイル時(768px以下)のレイアウトを決定

768px以下のサイズになったとき、どのようなレイアウトに変化させるかを決めます。(※今回は768px以下はすべて同じレイアウトでOKということでした。)

まずはグローナビメニュー部分はオフキャンパス形式に。
offcanvas.jpeg トップページの3カラムのところは、1カラムに。
three-colum.jpeg このようにそれぞれのページごとで、どのようなレイアウトに変化させるのかを決めていきます。複数カラムの場合、下に落としていくのが一般的です。(3カラム → 1カラム、2カラム → 1カラム)


3. レスポンシブ用CSSファイルを作成

レスポンシブ用のCSSを書いたファイルを新たに作成します。以下はCSS記述で特に注意した点です。

Media-Queriesによる指定
CSS3のMedia-Queriesを使用して以下のように書いていきます。

/*===============================================
●style.css 画面の横幅が769px以下
===============================================*/
@media screen and (max-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}
#container{
width:100%;
}

~以下、画面の横幅が768pxまでの場合のスタイル記入~

} 



画像を横幅全体に表示
画像がモバイルサイズでもはみ出さないように以下のようにかきます。

img{
  max-width: 100%;
  height: auto;
} 



Facebook「いいね!」ボックスを可変に
Facebookの「いいね!」 ボックスを幅に合わせて伸縮させるために以下のように書きました。

.fbcomments, .fb_iframe_widget, .fb_iframe_widget[style],
 .fb_iframe_widget iframe[style], .fbcomments iframe[style],
 .fb_iframe_widget span {
     width: 100%! important;
 } 



横向きにしたときにフォントサイズが大きくなるのを防ぐ
縦で見ていたスマホを横にするとフォントサイズが大きくなって見づらくなってしまいます。それを防ぐために以下のように書きます。

html,body {
  -webkit-text-size-adjust: 100%;
}  



4. レスポンシブ用CSSをヘッダー部分に追加

レスポンシブ用CSSをヘッダー部分に追加して新たに読み込ませます。

<head> 

~ヘッダー部分の記述~ 

<link rel="stylesheet" type="text/css" href="/share/css/responsive.css">
</head> 

また、ヘッダー部分に「viewport」をHTMLのにmeta要素として以下のように追加します。


<meta name="viewport" content="width=device-width, initial-scale=1.0">

この記述によってあらゆるサイズの横幅に対してWebサイトが適切な表示をします。


5. デバイス別表示チェック

デバイスチェックツールを利用して、各サイズで適切に表示されているかをチェックしていきます。
device-tool.jpeg (※レスポンシブ確認ツールのご紹介はこちらの記事をご覧ください。)


さいごに

以上がMAKEPOをレスポンシブ対応させるときのおおまかな手順でした。かかった時間としては合計で18〜20時間といったところでしょうか。

このブログではRetina対応やレスポンシブ用フレームワークの紹介など、これからもレスポンシブデザインに関する情報をみなさんにシェアしていきたいと思っています。いいツールやもっといい方法などがありましたらぜひ教えてくださいね!

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!