aishipのサービスサイトをリニューアルし、レスポンシブ化を行いました。
先日、弊社のサービスサイト「aiship.jp」を、サービスのバージョンアップに伴い大幅にリニューアルし、スマートフォン、タブレット、PCにワンソースで対応したレスポンシブデザインへ対応しました。
今回全体的なディレクションと一部コーディングを担当したのですが、こちらのサービスサイトのリニューアルポイントをサイト設計の視点でまとめてみたいと思います。
- ナビゲーション類は全てタッチ操作を意識
- cssでボタンを作成
- 画像上のテキストについて
- モバイルファーストで設計する
ナビゲーション類は全てタッチ操作を意識
グローバルナビ、フッターナビともにリンク類はタッチ操作を前提に設計いたしました。
横幅を狭めて画面を縦長にした場合でも、ボタンの縦幅を狭めることはせずに大きさを維持しています。たとえスマートフォンの小さな画面で見てもミスタッチをしないよう意識をしました。
CSSでボタンを作成
問合せボタン、資料請求ボタンは画像を使わずにcssで調整しています。
ボタンをcssで作るメリットは、
・画像を使わないので容量の節約になる
・ソースがスッキリするのでSEOにも効果的
の2点になります。
また画面の解像度によって画像ボタンであれば滲んだ表示になる可能性もありますが、テキストベースのボタンはそのような心配はありません。
ただし、デザイン性のある「目立つ」ボタンなどについては、まだまだcssで調整していくことは難しいのでそこは画像を使われることをおすすめします。
cssでのボタン調整については様々なジェネレーターがサイト上にあるので、簡単に作成することができます。
目的別レスポンシブサイト制作に役立つCSSジェネレーター8選
こちらの記事を参照下さい。
画像上のテキストについて
画像に文字を入れ込んでいると、小さな画面で画像が縮小され、文字も合わせて縮小されるため、文字の大きさも意識しなければなりません。
PC版、スマートフォン版と画像を切り替え、スマートフォンの小さな画面でもテキストが潰れる事のないように大きさを調整しています。
またデザイン性を大きく凝る必要がなければ、画像にテキストをかぶせる方法もあります。この方法であれば2種類の画像を用意することなく、cssのみでテキストの大きさや位置、基本的な装飾を調整することができるので手間を省くことができます。
aiship.jpのトップページは画像に文字を入れず、テキスト位置の移動をcssで調整しています。
モバイルファーストで設計する
全体的にモバイルファースト（モバイル端末での操作性やコンテンツ配置を前提に）で設計を行なっています。
レスポンシブデザインのメリットはPCからスマートフォンまであらゆる端末を1つのソースでカバーできるところにありますが、PCを起点にコンテンツ配置やコピーライティングを行うと、モバイルへ展開した時に画面の制限ゆえに画像の調整や文字数の調整が必要になり無駄な工数が発生します。
レスポンシブデザインでのサイト設計のポイントはコンテンツを共通化し、各デバイス間でのサイト更新の手間を省くことにあります。
モバイルファーストでコンテンツを作成することでその後画面サイズの大きなコンテンツへ展開した場合でも、共通化したコンテンツ配置をcssで調整することが容易になるため、後々のサイト設計の工数を大幅に削減することが可能です。
最後に
ちなみに上記のサービスサイトは「aishipR」のCMSを使い、構築されています。次回はaishipRの実際の作業工程を踏まえながら、CMSを使ったレスポンシブサイトの制作面を解説していきたいと思います。
aishipR 上林
