週刊Webテク通信

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

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

1. Handling Long and Unexpected Content in CSS | CSS-Trickshttps://css-tricks.com/handling-long-unexpected-content-css/

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

  • アイコンを右側または左側に配置したボタン
  • 入力欄のプレースホルダー
  • 長い名前
  • 記事本文の長いリンクや単語
  • 長いタグ
  • リンク付きのセクションヘッダー
図1 コンテンツ量が変わってもレイアウトが崩れないようにするCSSテクニック
図1 コンテンツ量が変わってもレイアウトが崩れないようにするCSSテクニック

2. Stay Away From These Annoying Design Trends in 2017https://medium.com/inkoniq-blog/stay-away-from-these-annoying-design-trends-in-2017-a0451a8ac866

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

  • やりすぎなパララックス(視差効果)
  • ビデオの背景
  • ハンバーガーメニューに全てが隠れている
  • 退屈なタイポグラフィ
  • 画像カルーセル
  • 画面を侵略するポップアップ
  • 場を散らかす気に障るもの
  • ブルータリズムと醜いデザイン

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

図2 避けるべき厄介な2017年のデザイントレンド
図2 避けるべき厄介な2017年のデザイントレンド

3. Keeping Your Website Design Consistenthttps://1stwebdesigner.com/consistent-web-design/

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

  • 内部一貫性を維持する
  • サイトを簡略化する
  • コンテンツに一貫性を持たせる
  • 均一性のある要素を作る
図3 Webサイトのデザインに一貫性を持たせる方法
図3 Webサイトのデザインに一貫性を持たせる方法

4. 20 Best New Portfolio Sites, June 2017 | Webdesigner Depothttps://www.webdesignerdepot.com/2017/06/20-best-new-portfolio-sites-june-2017/

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

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

図4 ポートフォリオサイトいろいろ
図4 ポートフォリオサイトいろいろ

5. Now UI Kit by Creative Timhttp://demos.creative-tim.com/now-ui-kit/index.html

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

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

図5 Bootstrap 4用のUIキット
図5 Bootstrap 4用のUIキット

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

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

Top 10 Bug Tracking Tools for Web Developers and Designershttps://speckyboy.com/bug-tracking-tools/

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

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

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

図6 バグトラッキングツールのまとめ
図6 バグトラッキングツールのまとめ

おすすめ記事

記事・ニュース一覧