2016年9月第5週号 1位は、最近のトレンドの小さなロゴを隅に配置したWebデザイン、気になるネタは、iPhone 7イヤフォン廃止で「Square」はどうなる？

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

ロゴを小さく扱うのが最近のWebデザインのトレンドということで、隅に小さなロゴを配置したサイトの実例と傾向についてまとめた記事です。

ロゴを以下の種類に分けて、それぞれの特徴などを解説しています。

CSS Grid Layout Moduleを使ってのグリッドレイアウトを解説したシリーズ記事で、現在「A Quick Start Guide」「⁠Fluid Columns and Better Gutters」の2本の記事が公開されています。

Flexboxでも難しい複雑なグリッドレイアウトを実現できるGrid Layout Moduleですが、まだ対応しているブラウザは少ないです。しかし、Microsoft EdgeとIE11で対応していることから普及が期待できると思います。

Chromeでは、「⁠chrome://flags」で試験運用機能のページを開き、「⁠試験運用版のウェブプラットフォームの機能」を有効にすることで利用できます。

正しいプロトタイピングツールの選び方を解説しています。

選び方として、以下の5つの観点から考えることを提案しています。

3は、どれだけ最終完成形に近い見た目や機能で作りたいかということで、手描きのアバウトな段階で作るというニーズもあるので、忠実度のレベルが高い方が良いという訳ではありません。

アニメーションするグラデーションを作れる軽量なライブラリです。このページ自体がサンプルになっていますが、なめらかに変化するグラデーションを実装できます。

グラデーションは線形、円形が選べますし、透明度を設定して画像に重ねたり、画像でマスクすることも可能です。

サイトのメイン画像やヘッダ画像を作るための素材集を大量にまとめた記事です。

個人サイトのトップページで、机の上ににパソコンやデジタルガジェット、ノートなどが並んでいる画像を見かけることがよくありますが、そういったイメージを合成して作るための素材などを紹介しています。

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

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

企業やブランドのSVG形式のロゴを探してダウンロードできるサービスです。各ロゴの利用にあたってのレギュレーションなどがないところが気になりますが、現在875個のロゴが登録されています。

キーボードまたはページ上のボタンで5段階にサイズを変更できたり、タグクラウドが画面全面に表示されたりと、サイトのUIも参考になります。

表示されるロゴは、その企業やサービスのサイトにリンクしています。カテゴリやハッシュタグで分類されているので、有名サービスへのリンク集としても使えそうです。なお、ロゴのSVGはロゴ上で右クリックかドラッグ＆ドロップで保存できます。

iPhone 7でイヤフォンジャックが廃止され、イヤフォンジャックに接続するSquareリーダーはどうなるのという記事がありました。アダプターを使えばこれまでのSquareリーダーは使えるし、Bluetoothタイプのリーダーも提供される予定とのことです。

従来のイヤフォンやヘッドフォンもアダプタを使えば利用できます。しかし、スマホピアスなどと呼ばれるアクセサリ類は、アダプタに付けるというわけにもいかないでしょう。現状はイヤフォンジャック付きの端末が主流ですが、いずれイヤフォンジャックなしの端末が増えるとスマホピアスは廃れていきそうです。

スマホケースにストラップという組み合わせは今でも使っている人が多いので、結局はガラケー時代からのストラップの方が生き残るのかもしれません。新たな発想のスマホアクセサリーが登場することにも期待したいですね。