週刊Webテク通信

2015年3月第3週号1位は、デザイナーがゲームから学べる5つのテクニック、気になるネタは、「Apple Watch」用サードパーティ製アクセサリーがはやくも発売〜保護フィルムや本革バンドも

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

1. 5 Tips Designers can Learn from Video Gameshttp://www.pixel77.com/5-tips-designers-learn-video-games/

デザイナーがビデオゲーム(テレビゲーム)から学べる5つのテクニックをまとめた記事です。

  1. 全体像
  2. メニュー
  3. ユーザーエンゲージメント
  4. 適切なユーザーインターフェイス
  5. 大量のアイコン

1は、細部に焦点を当てすぎてしまい全体像を見失わないようにと解説しています。ゲームの終わりはどこか、つまりゴールはどこかを忘れるなということですね。

ここで参考にすべきゲームとして挙がっているのは、シミュレーションゲームやマルチユーザーのオンラインゲームです。個人的にはそういったゲームにはなじみがないのですが、任天堂の「マリオパーティ」などのゲームのメニューやユーザーインターフェイスは良くできてるなといつも感心していますし、Webデザインにも取り入れられないかと考えることがあります。

図1 デザイナーがゲームから学べる5つのテクニック
図1 デザイナーがゲームから学べる5つのテクニック

2. Useful Tips For Learning Web Design - Creative Beaconhttp://www.creativebeacon.com/useful-tips-for-learning-web-design/

Webデザインを学ぶためのツールとサイトを紹介した記事です。

オンラインで学べるサイトとしては、W3School、TreeHouse、Lynda、Learnableが紹介されていました。

図2 Webデザインを学ぶためのツールとサイト
図2 Webデザインを学ぶためのツールとサイト

3. 10 Fresh Resources For Web Developers | SmashingApps.comhttp://www.smashingapps.com/2015/03/09/10-fresh-resources-for-web-developers.html

Web開発者のための便利なツールやスクリプトなどから、新しいものを10個まとめています。

1つ目に紹介されているDaux.ioは、アプリケーションやサービスのドキュメント作成に役立ちそうなWebサービスです。オンラインブック風のドキュメントを作って公開できるもので、本文はマークダウン記法でも書けます。

図3 Web開発者のための便利なツール類いろいろ
図3 Web開発者のための便利なツール類いろいろ

4. 15 Cool Web Design Infographics You Should Definitely Keephttp://designwebkit.com/inspiration/15-cool-web-design-infographics/

Webデザインに関するインフォグラフィックスをまとめた記事です。

Webデザインの手順や流行、傾向などについてまとめられたインフォグラフィックスが、多数掲載されていました。

図4 Webデザインに関するインフォグラフィックス
図4 Webデザインに関するインフォグラフィックス

5. Showcase of Web Design Layouts with Angled Lineshttp://line25.com/articles/showcase-of-web-design-layouts-with-angled-lines

斜めの線を使ったWebデザインのショーケースです。

画面を斜めに区切ったレイアウトは、デザイン的にもコーディングする上でも難易度が高そうです。しかし、ここにある例のように、うまくデザインできると差別化につながることが実感できました。

図5 斜めの線を使ったWebデザインのショーケース
図5 斜めの線を使ったWebデザインのショーケース

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

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

App Store Screenshot Builder - Create gorgeous images for your App Store page in minutes. | LaunchKithttps://launchkit.io/screenshots

iPhoneの画面部分にスクリーンショット画像を合成したイメージを作れるWebサービスです。App Storeのアプリ紹介画像を作るためのビルダーですが、別な用途にも役立ちそうです。

ベースとなるデバイスはiPhone4以降のiPhone 6/6plusまでから選べ、色も白と黒とを切り替えられます。また、背景色を選ぶか背景画像をアップロードすることも可能です。

上か下かに文字を入れられるようになっており、その分iPhoneは上か下かがちょっと欠けるのですが、それが見慣れたアプリ紹介画像っぽい仕上がりを演出しています。

図6 iPhoneのアプリ紹介画像を作るビルダー
図6 iPhoneのアプリ紹介画像を作るビルダー

おすすめ記事

記事・ニュース一覧