週刊Webテク通信

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

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

ネットで見かけた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 細かいカスタマイズが可能なアイコンサービス

今週の気になるWebネタ

「iOS 8.4」も配信開始:「Apple Music」が国内サービス開始――月額980円で数百万曲を聴き放題(3カ月無料) - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1507/01/news061.html

いきなり日本でも「Apple Music」がサービス開始しました。今のところ,日本での音楽定額聴き放題サービスとしては,Apple Music,LINE MUSIC,AWAが三大サービスという状態のようです。

どのサービスも結構好評のようで,邦楽のラインナップが少なすぎると感じているわたしはちょっと意外に感じています。特にApple Musicは,ほかの二つのサービスに比べても日本の曲が少なすぎます。とはいえ,将来的にはiTunes Storeにある曲のほとんどがApple Musicでも聴けるようになれば納得できる楽曲数になるでしょうし,その可能性はありそうです。

Apple Musicとともに,iTunes Matchの役割と一部かぶっているiCloud ミュージックライブラリというのが登場し,ややこしいことになっているようです。iCloud フォトライブラリもフォトストリームとの違いがややこしいですし,iCloudがらみのサービスは今のところちょっとやっかいという印象がぬぐえません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入