週刊Webテク通信

2017年6月第5週号1位は、失敗しないメニューデザインのヒント、気になるネタは、PCで「フリック入力」できる専用デバイス キーボードが使えない“スマホネイティブ”世代向け

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2017年6月19日~6月25日の間に見つけた記事のベスト5です。

1. 10 Ways to Design Menus That Don’t Suck | Webdesigner Depothttps://www.webdesignerdepot.com/2017/06/10-ways-to-design-menus-that-dont-suck//

失敗しないメニューデザインのヒントを10個紹介しています。

  1. メガメニューをやめる
  2. 検索機能を目立たせる
  3. ナビゲーションの選択肢の数を制限する
  4. 賢いナビゲーションメニューを開発する
  5. ナビゲーション項目の並び順にも意味を持たせる
  6. 長いスクロールのページでは固定メニューを使う
  7. ナビゲーションを隠さない
  8. 説明的なラベルテキストを用いる
  9. 全画面ナビゲーションも検討する
  10. 垂直方向に並べる
図1 失敗しないメニューデザインのヒント
図1 失敗しないメニューデザインのヒント

2. エンジニア向け!CSSレイアウト講座&用途別に選べる横並び・中央寄せのまとめ - Qiitahttp://qiita.com/nezurika/items/5b278c1e134056157164/

CSSで要素を横並びにする方法や中央に配置する方法を解説しています。

ブロック要素とインライン要素の解説など初歩的なところから丁寧に説明していますが、後半はCSSのテクニック集のような実践的な内容で参考になります。

図2 CSSでの横並び・中央寄せのテクニック
図2 CSSでの横並び・中央寄せのテクニック

3. Are Ready-made Websites Killing Web Design? - Hongkiathttp://www.hongkiat.com/blog/ready-made-websites-killing-web-design//

テンプレートから簡単にWebサイトを作れるSquarespaceのようなツールはWebデザイナーを不要にするものではなく、敵じゃなく味方として利用した方が良いといった内容の記事です。

簡単Webサイト作成ツールと素人デザイナーの限界としては、以下のような内容で解説していました。

  1. 配色は1日では学べない
  2. 誰もが正しいタイポグラフィとフォント選びに熟練しているわけではない
  3. 表面だけでなく裏側の仕組みまで分かっているのは専門家だけ
図3 簡単Webサイト作成ツールはWebデザイナーを不要にするのか?
図3 簡単Webサイト作成ツールはWebデザイナーを不要にするのか?

4. 10 CSS Breadcrumbs | Free Frontendhttp://freefrontend.com/css-breadcrumbs//

パンくずリストのCSSでのデザイン例を10個紹介しています。

各サンプルはコード共有サイトCodePenにリンクしているので、コードを確認しながらいじってみることも可能です。

図4 パンくずリストのCSSデザイン例いろいろ
図4 パンくずリストのCSSデザイン例いろいろ

5. 10 Beautifully Designed Examples of Split Screen Layouts in Web Designhttps://1stwebdesigner.com/split-screen-layouts-web-design//

画面を二分割したWebデザインの優れた例をまとめています。うまく使えばコンテンツの配置が分かりやすく、ユーザーが情報を見つけやすいページが作れます。

最初の画面だけではなく、二分割のままページが切り替わっていく凝った作りのサイトもありました。

図5 画面を二分割したWebデザインの優れた例
図5 画面を二分割したWebデザインの優れた例

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

Essential Color Tools for UX Designers – UX Planethttps://uxplanet.org/essential-color-tools-for-ux-designers-530036eaf9ae/

今回は、カラーパレットを作るためのサービス各種をまとめた記事を紹介します。

以下の3項目にわけて掲載していました。

  • インスピレーションを得る
  • カラースキームを作る
  • 色のアクセシビリティ

色覚異常の人にも使いやすいサイトにするため、色盲での配色テストや色覚異常者の見え方をシミュレートするサービスなどが紹介されています。ちなみに、世界中で2億8500万人以上が視覚障害をもっており、多くの人が軽度か中程度とのことです。

図6 カラーパレットを作るためのサービスいろいろ
図6 カラーパレットを作るためのサービスいろいろ

おすすめ記事

記事・ニュース一覧