週刊Webテク通信

2015年7月第2週号1位は、マイクロインタラクションによりユーザー体験を向上させる秘訣、気になるネタは、「Apple Music」国内サービス開始――月額980円で数百万曲を聴き放題

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

1. 7 secrets for enhancing UX with micro-interactions | Webdesigner Depothttp://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/

マイクロインタラクション(最小単位の相互作用)により、ユーザー体験を向上させる秘訣を紹介した記事です。

使いやすく、魅力的で親しみやすいインターフェイスを作るためのヒントを、以下の7つに分けて解説していました。

  • 現在のシステムの状況を可視化する
  • ハイライトを変更する
  • 操作の流れを一貫させる
  • 一般的ではないレイアウト
  • 行動を喚起する
  • 入力を視覚化する
  • 最初にアニメーションなどで操作法を教える
図1 マイクロインタラクションでユーザー体験を向上させる秘訣
図1 マイクロインタラクションでユーザー体験を向上させる秘訣

2. What You Need To Know When Creating A Portfolio Websitehttp://www.designyourway.net/blog/design/creating-a-portfolio-website/

ポートフォリオサイトを作るときに知っておくべきことをまとめた記事です。

  • 事例紹介を作る
  • 詳細なビジュアルで事例を示す
  • 以前のプロジェクトの制作期間を記載する
  • 全ての作品を掲載しない(良いものを載せる)
  • 新しい仕事にフォーカスを当てる
  • 実績を知ってもらう
  • 共同作業をした場合、自分の担当を説明する
  • シンプルさを保つ

企業サイトなどの実績ページを作る場合にも参考になると思います。

図2 ポートフォリオサイトを作るときに知っておくべきこと
図2 ポートフォリオサイトを作るときに知っておくべきこと

3. Working with Shapes in Web Design | CSS-Trickshttps://css-tricks.com/working-with-shapes-in-web-design/

CSSやSVGを使ってWebページ上に図形を描く方法を解説しています。

以下のような場合のコーディング例が掲載されていました。

  • border-radiusを使った丸や角丸図形
  • ボーダーを利用した三角形や台形
  • 図形を回転させる方法
  • 文字を任意の形で回り込ませる方法
  • 画像を図形で切り抜く方法
図3 Webページ上に図形を描く方法
図3 Webページ上に図形を描く方法

4. Building Responsive Email Templates for Your Newslettershttp://spyrestudios.com/responsive-email-templates/

レスポンシブなHTMLメールのテンプレートを作るためのヒントを解説した記事です。

参考になるテンプレートやチュートリアル、トレーニングビデオが紹介されていました。

図4 レスポンシブなHTMLメールのテンプレートを作るヒント
図4 レスポンシブなHTMLメールのテンプレートを作るヒント

5. History of Icons - a visual brief on icon history by FUTURAMOhttps://historyoficons.com/

アイコンの歴史をまとめたサイトです。

1981年のXEROXから始まり、83年のApple Risa、84年のApple Macintoshから現在までのアイコンの歴史をインフォグラフィックス風にまとめています。

実はこのサイトは、FUTURAMOというアイコンセットのPRのために作られたようです。FUTURAMOについては「先週の気になるWebサービス」で紹介します。

図5 アイコンの歴史をまとめたサイト
図5 アイコンの歴史をまとめたサイト

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

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

FUTURAMO ICONS - The Invention in Icon Designhttps://futuramo.com/

「FUTURAMO ICONS」は、簡単にカスタマイズできるアイコンセットを提供しているサービスです。

大きさ、色はもちろん、線幅や角の丸みを調整して、自分好みのアイコンを作ることが可能です。カスタマイズしたアイコンはSVG、PNG、Webフォント、SVGスプライトで書き出すことができます。

サイト全体のインターフェイスはちょっと凝りすぎている感もありますが、アイコンを編集する画面はシンプルで分かりやすいです。カスタマイズして選んだアイコンだけをまとめて書き出せます。

有料(58ドル)のプロ版があり、無料版2496個に対しプロ版では20160個ものアイコンを入手できます。

図6 細かいカスタマイズが可能なアイコンサービス
図6 細かいカスタマイズが可能なアイコンサービス

おすすめ記事

記事・ニュース一覧