2017年6月第4週号 1位は、文字数などコンテンツ量が変わってもレイアウトが崩れないようにするCSSテクニック、気になるネタは、TwitterがUIを一新、四角いプロフィール画像が丸くなった

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

文字数などコンテンツの量が変わることによって、レイアウトが崩れないようにするCSSのテクニックを紹介しています。

厄介なデザイントレンドについて、なぜ避けるべきかを解説した記事です。

これらのトレンドをプロとしてうまく使うことを否定してはいないのですが、流行りだからと飛びつかずマイナス面も知っておくことが重要ということですね。

Webサイトのデザインに一貫性を持たせる方法を解説しています。

ポートフォリオサイトを20個紹介しています。それぞれのサイトについてけっこう長文の解説が付いています。

非常にシンプルなミニマルデザインのもの、インタラクションに工夫のあるものなどが掲載されていました。

Bootstrap 4用のUIキットです。オレンジ色を基調とした鮮やかな色づかいで、ボタンやメニュー、ナビゲーションなどがデザインされています。

ランディングページやポートフォリオページのサンプルも用意されています。ワイヤーフレーム作成のためのSketch/PSD形式のファイルもあります。

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

LINEの音声スピーカ「WAVE」は1万5000円--秋に発売へ - CNET Japan
LINEのキャラクターをモチーフにしたClova搭載のスマートスピーカも発表されました
Google、新ツール「Backup and Sync」発表。Googleドライブへの任意フォルダのバックアップに対応 - Engadget 日本版
Googleドライブフォルダ以外のフォルダもバックアップや同期できるようになります
Googleの「GBoard」に手描きで絵文字を検索する機能 - ITmedia NEWS
日本語はサポートしていないGBoardの新機能で今のところAndroid版のみとのことです

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

今回は、ウェブデザイナー／開発者のためのバグトラッキングツールをまとめた記事を紹介します。制作チーム間や、クライアントと制作チームで不具合などの報告をするためのサービスです。

簡単な操作で画面キャプチャに注釈を入れられるようになっており、その注釈の入れ方や機能がどのサービスを選ぶかのポイントになりそうです。ブラウザの拡張機能やCMS用プラグインがあるサービスもあります。

基本的にはどれも有料で利用ユーザー数ごとにプランが分かれているので、コストも導入のための判断材料として大きいですね。日本語のサービスじゃないとクライアントにも使ってもらうのは難しいと思いますが、興味深いサービスが揃っています。

Twitterのユーザーインターフェイスがブラウザ版／アプリ版揃って変更されました。特にアイコンが丸くトリミングされるようになったことが日本では話題となっています。

日本では顔写真ではなくアニメ絵アイコンを使っている人が多く、アイコンへのこだわりが強いのも騒ぎになった原因かもしれません。LINEもInstagramも丸アイコンですし、そのうち受け入れられると思いますが。

メニューの配置が変わったことも含め、変更がある度に「前の方がよかった」と言われるTwitterですが、その「前」よりさらに前から段々と変化してきているわけで、結局は慣れの問題なのでしょう。