週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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 カラーパレットを作るためのサービスいろいろ

今週の気になるWebネタ

PCで「フリック入力」できる専用デバイス キーボードが使えない“スマホネイティブ”世代向け - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1706/20/news098.html

パソコンとスマートフォンをケーブルでつなぎ,スマートフォンからパソコンのキー入力を可能にするデバイスが登場しました。最近の新入社員や大学生はキーボードのタイピングが苦手というニュースを見たのが開発のきっかけだそうです。

対応スマートフォンはAndroid 4.1以降で,パソコンはWindows,Mac,Linuxに対応。スマートフォン側だけに専用アプリが必要ですが,IMEは任意のものが使えます。

「Shift」⁠Ctrl」⁠Alt」などの特殊キーを使え同時押しもOK,マウスカーソルの操作やスクロールホイールも使えるので,パソコンの操作が全てスマートフォン側でできるというのが面白いですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入