週刊Webテク通信

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

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

ネットで見かけた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のアプリ紹介画像を作るビルダー

今週の気になるWebネタ

「Apple Watch」用サードパーティ製アクセサリーがはやくも発売~保護フィルムや本革バンドもhttp://touchlab.jp/2015/03/apple_watch_3rdparty_accessory/

アップルのイベントでApple Watchの価格や発売日が発表され,ネットでもいろいろと話題になっています。Appleからひさしぶりの新カテゴリ製品の登場で,サードパーティの関連グッズも盛り上がってくるんじゃないでしょうか。

iPhoneとは違いケースは不要でしょうが,交換用のバンドはいろいろと登場しそうです。ファッションブランドからも出るんでしょう。そして,日本で定番のサードパーティ商品といえば画面の保護フィルムです。調べてみると,やはり販売されるんですね。

腕時計を付けない派からは,懐中時計型Apple Watchがあったらいいのにという声も聞こえてきますが,取り出して確認するんだったらiPhoneと使用用途があまり変わりません。手首に振動で何かを伝えたり,加速度センサーで運動を計測したりと,Apple Watchはやはり腕に付けてこその端末なのだと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入