週刊Webテク通信

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

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

ネットで見かけた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 ブランドのカラースキームを大量に集めたサービス

今週の気になるWebネタ

GoogleのiOS向けキーボードアプリ「Gboard」,日本語に対応 | マイナビニュースhttp://news.mynavi.jp/news/2017/09/20/103/

iOS 11がリリースされるのと同じタイミングで,Googleのキーボードアプリ「Gboard」が日本語に対応しました。iOS版と機能の違いもあるようですが,Android版はまだ日本語対応していません。

キーボード上でGoogle,YouTube,Googleマップから検索し,結果をコピーする機能はチャットなどで便利そうですが,それほど使用頻度はないかもしれません。用語や人名の表記を一旦Google検索で確認するといった用途にも使えるかもしれません。

個人的に気に入っているのは,日本語は12キーで,英数入力はQWERTYという設定ができることです。これで言語キーで日本語と英語を切り替えなくても,英語はフルキーボードで入力できて便利です。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入