webデザイン関連書籍からの小ネタ(レスポンシブWebデザイン

この記事は約2分30秒で読めます

今回は、「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック(ASCII)菊池崇」より、役立つと思われる情報を適当にご紹介。

以下本書より引用。

日本語のテキストでは一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされている

一行の高さを基準にして一定の間隔で要素が配置されるように考えます。要素同士の距離に気息性を持たせることで、読みやすく、バランスの取れたデザインができます。

「モバイルファースト」のコンセプトを提唱したルーク・ウロブルスキ氏は~中略~ナビゲーションがファーストビューを占有する状況を「Navigation First, Content Second」(ナビゲーションファースト、コンテンツセカンド)と呼び、問題提起しています。

ダミー画像を表示する「placeimg」
http://placeimg.com/
ダミー画像を作成するツールです。横幅と高さ、画像のカテゴリー、フィルターといった条件を設定すると、Flickrで公開されている写真からダミー画像を生成します。

「griddle.it」によるグリッドデザイン
http://griddle.it/
ブラウザにグリッドを表示するツールです。~中略~URLに数値を入力するだけでグリッドを作成できます。

アイコンフォントの利用「IcoMoon」
http://icomoon.io/
アイコンフォントとは、アイコンをフォントファイル化してWebフォントとして読み込み、テキストとして表示する方法です。複数のアイコンを1つのフォントファイルとして読み込めるので、アイコンを1つずつ読み込むのに比べてHTTPリクエストを削減できます。また、テキストとして表示するので、解像度に依存せず、CSSで簡単に色を変えたり、陰を付けたり加工できるのもメリットです。

引用終わり。

ちなみにわたしはこの本を読んで(レスポンシブWeb関連の書籍は三冊目)、ようやく”正しい”レスポンシブWebサイトの制作方法を理解することができた。とはいえ、しばらくレスポンシブWebサイトのゼロからの制作案件はなさそうなので、それまでに忘れそう……。

記事カテゴリー: WEB