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

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

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

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

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

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

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

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

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

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

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

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

元SMAP3人のサイト「新しい地図」公開 YouTubeやLINE、微博まで……SNSフル活用 - ITmedia NEWS
ネットでの露出を抑えていたジャニーズを出て、ソーシャルメディアを活用していくというところが興味深いです
Amazon、法人向けサービス「Amazon Business」の国内提供開始 | マイナビニュース
2億種類以上の商品をそろえ、月末締めの請求書払いにも対応しているとのことです
iOS 11では操作画面の録画が可能に - ITmedia Mobile
マイクからの音声を同時に記録することもできるそうです

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

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

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

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

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

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

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