週刊Webテク通信

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

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

ネットで見かけた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 バグトラッキングツールのまとめ

今週の気になるWebネタ

TwitterがUIを一新,四角いプロフィール画像が丸くなった | TechCrunch Japanhttp://jp.techcrunch.com/2017/06/16/20170615twitter-tweaks-its-design-again-in-an-attempt-to-woo-newcomers/

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入