週刊Webテク通信

2017年11月第2週号1位は、FlexboxとCSS Gridを併用したレイアウトのススメ、気になるネタは、iPhone Xの顔認証はだませるか? 実機で検証

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

1. Flexbox and Grids, your layout’s best friendshttps://aerolab.co/blog/flexbox-grids/

FlexboxとCSS Gridの両方を使ってレイアウトすることを勧める記事です。

以下の考え方は間違っていると主張しています。

  • GridがあればFlexboxはいらない
  • FlexboxはGridが作動しない場合の代替手段

グリッドを作った後、セルの中で画像やテキストを配置するのにFlexboxを使うと良いとのことです。

FlexboxとGridそれぞれでの、レスポンシブに可変するレイアウト方法の簡単な紹介もあります。

図1 FlexboxとCSS Gridを併用したレイアウトのススメ
図1 FlexboxとCSS Gridを併用したレイアウトのススメ

2. 5 Ways to Improve the UX of Site Search | Webdesigner Depothttps://www.webdesignerdepot.com/2017/11/5-ways-to-improve-the-ux-of-site-search/

サイト検索のUXを向上させる5つの方法を解説しています。

  1. ユーザーがそれについて知りたいという場所に検索ボックスを置く
  2. 検索フィールドを適切なサイズにする
  3. 何を検索できるのかを明確にする
  4. 検索ボタンを押した後にも検索キーワードを残しておく
  5. 自動補完の仕組みを利用する
図2 サイト検索のUXを向上させる5つの方法
図2 サイト検索のUXを向上させる5つの方法

3. The web design process in 7 simple steps | Webflow Bloghttps://webflow.com/blog/the-web-design-process-in-7-simple-steps

7つのシンプルな段階にわけてウェブデザインのプロセスを解説しています。

  1. 最終目標をハッキリさせる
  2. 範囲を定義する
  3. サイトマップとワイヤーフレームを作る
  4. コンテンツを作る
  5. ビジュアル要素(スタイルガイドを定義しデザイン要素を追加する)
  6. テスト
  7. 公開
図3 7段階で解説するウェブデザインのプロセス
図3 7段階で解説するウェブデザインのプロセス

4. Design Trend: Dark Color Palettes & Animation | Design Shackhttps://designshack.net/articles/graphics/design-trend-dark-color-palettes-animation/

最近のデザイントレンドとして、暗い配色でアニメーションが特徴的なウェブデザインの事例をまとめています。

このデザインに挑戦する場合のヒントとして以下の項目が紹介されていました。

  • 1ページ完結のデザインにこだわる
  • 対比的な色を使用する
  • シンプルなアニメーション
  • レイヤーに分けて設計する
  • 太字のタイポグラフィを使う
図4 暗い配色でアニメーションが特徴的なウェブデザインのまとめ
図4 暗い配色でアニメーションが特徴的なウェブデザインのまとめ

5. Restaurant Websites Design: Tips, Inspiration, and Best Practiceshttp://www.designyourway.net/blog/web-design/restaurant-websites-design/

飲食店のウェブサイトデザインの事例や制作時に気をつけることをまとめた長文の記事です。

ユーザーが飲食店のサイトに求めていることや、ニーズに応えるためのヒントを豊富に紹介しています。

図5 飲食店のウェブサイトデザイン制作の事例とテクニック
図5 飲食店のウェブサイトデザイン制作の事例とテクニック

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

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

Responsive Screenshotshttps://responsive-screenshots.com/

レスポンシブデザインの表示確認などにも使える、複数の画面サイズでウェブページのスクリーンショットをまとめて撮れるサービスです。残念ながら日本語は表示されないので現状利用シーンは限られそうですが、今後対応してくれることに期待を込めて紹介したいと思います。

同時にiMac、MacBook、iPad、iPhoneの4数類のスクリーンショットを撮影できます。それぞれのデバイスで、さらに細かく機種を設定することで、撮影する画面サイズが変わります。スクリーンショットはまとめてZipファイルでダウンロードでき、個別にダウンロードも可能です。

スクリーンショットを撮った後、複数サイズの画面が並んで表示されるところが個人的に気に入っています。並んだ状態の画像もダウンロードできるといいのですが、これは自分でスクリーンショットを撮ればいいですね。

図6 複数画面サイズでウェブページのスクリーンショットが撮れるサービス
図6 複数画面サイズでウェブページのスクリーンショットが撮れるサービス

おすすめ記事

記事・ニュース一覧