週刊Webテク通信

2017年9月第4週号1位は、実例で学ぶFlexboxの完全ガイド、気になるネタは、GoogleのiOS向けキーボードアプリ「Gboard」、日本語に対応

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

1. The Ultimate Guide to Flexbox — Learning Through Exampleshttps://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676

実例で学ぶFlexboxの完全ガイドです。ただの機能紹介ではなく、実際に使いそうなレイアウトを元に紹介しているところが便利です。

  1. フォトギャラリー
  2. カード型デザイン
  3. グリッドレイアウト
  4. ウェブサイトの基本的なレイアウト
  5. メディアオブジェクト(TwitterやFacebookの投稿のようなアイコン+本文)
  6. フォーム要素
  7. モバイルアプリのレイアウト

上記7つの実例をFlexboxでレイアウトする方法を、丁寧かつ簡潔に解説しています。

図1 実例で学ぶFlexboxの完全ガイド
図1 実例で学ぶFlexboxの完全ガイド

2. 4 Tricks to Make Load Times Feel Faster | Webdesigner Depothttps://www.webdesignerdepot.com/2017/09/4-tricks-to-make-load-times-feel-faster/

ロード時間を速く感じさせるためのテクニックを紹介しています。

  1. フィードバックがない状態でユーザーを待たせない
  2. 変化のないロード中の表示は避ける
  3. アニメーションを使ったロード中のインジケーターを使う
  4. ユーザーが時間を短く感じるように工夫する
図2 ロード時間を速く感じさせるための4つのテクニック
図2 ロード時間を速く感じさせるための4つのテクニック

3. Design for iPhone X – prototyprhttps://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c

iPhone X向けにデザインする場合の注意点などを解説しています。

Webkitのサイトにも、iPhone XのSafariでのページの見え方や、独自のCSSプロパティやviewportの設定方法を解説したページがありました。

図3 iPhone X向けにデザインする場合の注意点など
図3 iPhone X向けにデザインする場合の注意点など

4. Free iPhone X Mockup Templates (28 Mock-ups) | Freebies | Graphic Design Junctionhttp://graphicdesignjunction.com/2017/09/free-iphone-x-mockup-templates/

iPhone Xのモックアップ素材をまとめています。立体感のあるリアルなものから、シンプルなベクターイラストまで各種揃っています。

PSD、Sketch、AI&EPSとファイル形式も主要なものが揃っていました。

図4 iPhone Xのモックアップ素材いろいろ
図4 iPhone Xのモックアップ素材いろいろ

5. After the flood | Projects | AtF Sparkhttp://aftertheflood.co/projects/atf-spark

フォントを使って折れ線グラフや棒グラフを描くというプロジェクトのページです。数字を列記したテキストにグラフ用フォントを指定すると、Webフォントで表示されてグラフが描画されるという仕組みです。

テキストを変えるだけなのでメンテナンスも簡単ですし、データベースなどから数字を取ってきて動的にグラフを変化させるのにも便利だと思います。

図5 フォントを使って折れ線グラフや棒グラフを描くというプロジェクト
図5 フォントを使って折れ線グラフや棒グラフを描くというプロジェクト

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

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

BrandColors - official brand color hex codeshttps://brandcolors.net/

ブランドのカラースキームを大量に集めたサービスです。ブランド名で検索したり、カラーコードのコピー、ファイル保存もできます。

ブランド名をクリックすると、そのブランドサイトへのリンクなど、いくつかのリンクが表示されます。⁠Source URL」のところからは、そのブランドのデザインガイドなどブランドカラーについて解説しているページが見られて興味深いです。

複数のブランドを選んで、まとめてカラーコードをダウンロードできます。ダウンロードの形式も、Adobeのスウォッチファイル、CSS、LESS、SCSS、Stylusと豊富です。

図6 ブランドのカラースキームを大量に集めたサービス
図6 ブランドのカラースキームを大量に集めたサービス

おすすめ記事

記事・ニュース一覧