週刊Webテク通信

2017年4月第1週号1位は、ヘッダーデザインの重要性と効果的なヘッダーデザインのヒント、気になるネタは、Facebook Messengerからライブで位置を共有―待ち合わせが飛躍的に簡単になる

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

1. Best Practices For Website Header Design | Tubik Studiohttp://tubikstudio.com/best-practices-for-website-header-design/

ウェブサイトのヘッダーデザインの重要性と効果的なヘッダーデザインのヒントを紹介しています。

ヘッダーに入る要素の例がまとめられていました。

  • ブランドのアイデンティティを表すロゴ、ブランド名、スローガン、マスコットなどの要素
  • キャッチコピー
  • ウェブサイトの各コンテンツへのリンク
  • 主要なソーシャルメディアへのリンク
  • 連絡を取るための情報(電話番号、メールアドレスなど)
  • 言語の切り替え
  • 検索窓
  • 購読フォーム
  • お試しバージョンのダウンロードやAppストアなどへのリンク

デザインの実践面においては、ハンバーガーメニューや固定ヘッダなどについて解説しています。

図1 ヘッダーデザインの重要性と効果的なデザインのヒント
図1 ヘッダーデザインの重要性と効果的なデザインのヒント

2. The Role Functional Animation Plays in Enhancing User Experiencehttps://speckyboy.com/functional-animation-user-experience/

ユーザー体験を強化する機能的なアニメーションについて解説した記事です。

以下の項目に分けて説明しています。

  • 動くものが気を引くのは生物学的にも当然だが使いすぎない
  • マイクロインタラクションによるユーザーへの報酬
  • ウェブサイトにどのようにアニメーションを組み込むか
  • モバイル向けのデザイン
  • 機能的なアニメーションのための効果的な手法
  • よくあるアニメーションの落とし穴に気をつける
  • バランスを取る
図2 ユーザー体験を強化する機能的なアニメーションについて
図2 ユーザー体験を強化する機能的なアニメーションについて

3. Using DevTools to Tweak Designs in the Browser | CSS-Trickshttps://css-tricks.com/using-devtools-tweak-designs-browser/

ブラウザのデベロッパーツールを使ったテクニックをまとめています。

いわゆる「Designs in the Browser」の考え方で、ブラウザ上でデザインをしていくときのテストや試行錯誤に役立つのがデベロッパーツールです。デベロッパーツールを活用するためのヒントが動画で紹介されていて、参考になります。

図3 ブラウザのデベロッパーツールを使ったテクニックいろいろ
図3 ブラウザのデベロッパーツールを使ったテクニックいろいろ

4. 10 Free Customizable CSS Snippets for Radio Toggles & Switcheshttps://1stwebdesigner.com/css-snippets-radio-toggles-switches/

ラジオボタンのCSSによるカスタマイズ事例を集めた記事です。

iOSでのON/OFFボタンのような切り替えボタンにスタイリングする方法が各種紹介されており、コードをすぐに確認、流用できます。

図4 ラジオボタンのCSSでのカスタマイズ事例
図4 ラジオボタンのCSSでのカスタマイズ事例

5. 15 Brilliant Website Design Examples To Inspire You. 7 Steps To Awesomenesshttps://webdesignledger.com/15-brilliant-website-design-examplese-to-inspire-you/

インスピレーションを得られる優れたウェブデザインを15サイト紹介しています。

また、すばらしいウェブデザインのために必要な項目を7つ挙げていました。

  1. 空白
  2. フォント
  3. シンプルさ
  4. 一貫性
  5. ユーザビリティー
  6. 視覚的な階層構造
図5 優れたウェブデザインの実例紹介
図5 優れたウェブデザインの実例紹介

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

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

DestructionMessage.comhttp://www.destructingmessage.com/

DestructionMessage.comは、指定した時間で自動消去されるメッセージを作れるWebサービスです。消去されるまでの時間は15秒から5分までを6段階で指定できます。画像などを貼り付けることはできません。

インターフェイスが英語ですが、メッセージが表示されるだけなので、受け取った側が操作に迷うようなことはないでしょう。作成する側も、表示される時間を選んで、メッセージを書いて作成ボタンを押すだけです。URLが生成されるので、それを相手にメールやメッセージアプリなどで送ります。

自動で削除されるメッセージといえばSnapchatが有名で、それを真似てFacebook Messengerなどにも同様の機能が追加されています。自動消去に対応していないメッセージサービスでも、このサービスで生成したURLを送れば自動消去メッセージが送れるというわけですね。

図6 自動消去されるメッセージを作れるサービス
図6 自動消去されるメッセージを作れるサービス

おすすめ記事

記事・ニュース一覧