週刊Webテク通信

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

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

ネットで見かけた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 複数画面サイズでウェブページのスクリーンショットが撮れるサービス

今週の気になるWebネタ

iPhone Xの顔認証はだませるか? 実機で検証http://blogos.com/article/257027/

iPhone Xが発売され,さっそく顔認証について実験しているユーザーも多いようです。兄弟で認証突破した例や,寝ている人の顔認証を突破する動画が話題になりました。

事前情報では「目を開けていないと認証できない」はずだったのにと思い調べてみると,⁠Face IDを使用するには注視が必要」という設定があり,これをオフにすると目をつむっていても認証突破できるそうです。

度の高すぎる眼鏡や偏光サングラスを付けたまま使いたいという人や,病気や障害によって目を見開くのが困難な人のためにこの設定はあるようです。目の不自由な人のための読み上げ機能「VoiceOver」を有効にした場合,この設定は自動的にオフになるというのもなかなか考えられているなと思いました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入