週刊Webテク通信

2013年4月第3週号 1位は，レスポンシブWebデザインのサイトを作る上で気をつけるべきこと，気になるネタは，保存アイコン＝フロッピーディスクの時代は終わった…？

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, モバイルアプリ, ストリートビュー, フロッピーディスク

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2013年4月8日～4月14日の間に見つけた記事のベスト5です。

1. Top Features Every Responsive Website Should Have | designsign.nethttp://designsign.net/top-features-every-responsive-website-should-have/

レスポンシブWebデザインのサイトを作る上で気をつけるべきことをまとめた記事です。

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

  • ページの容量を少なくする
  • 可変要素を考慮する
  • デバイスの画面サイズに依存しない
  • 柔軟性を忘れない
  • 多くの要素，少しのレイアウト

図1　レスポンシブWebデザインで気をつけるべきこと

図1　レスポンシブWebデザインで気をつけるべきこと

2. Designing Mobile Apps, Where to Start? - Designmodohttp://designmodo.com/design-mobile-apps/

モバイルアプリをデザインするに当たって，準備するべきことを解説しています。

  • 市場を知る
  • 視覚的なインスピレーション
  • モバイルデザインパターン
  • デザインを始める前に

図2　モバイルデザインを始めるために大事なこと

図2　モバイルデザインを始めるために大事なこと

3. ビビッドな色使いが目を引く，フラットなUIデザインのアプリまとめ | MEMOPATCHhttp://memo.goodpatch.co/2013/04/vivid-flat-ui/

フラットなUIデザインのモバイルアプリを多数紹介しています。

全てを同じフォーマットで紹介しているので見やすいですね。

図3　フラットなUIデザインのモバイルアプリいろいろ

図3　フラットなUIデザインのモバイルアプリいろいろ

4. 20+ sunshine yellow website designs for your inspiration | Admire The Web - The Very Best Web Design Inspirationhttp://admiretheweb.com/articles/20-sunshine-yellow-website-design-inspiration/

黄色がベースのWebデザインのギャラリーです。「⁠sunshine yellow」とあるので，日光のような黄色ということでしょうか。

アクセントカラーとしてではなく，メインカラーとして目立つように明るい色を使うことを恐れてはいけませんとのことでした。

図4　黄色がベースのWebデザインのギャラリー

図4　黄色がベースのWebデザインのギャラリー

5. 15 Must-Have High Quality Free Flat Icon Sets | Desizn Techhttp://desizntech.info/2013/04/15-high-quality-and-visually-appealing-free-flat-icon-sets/

フラットデザインのアイコンセットを多数紹介しています。

多くのものが，ベクターデータやフォントとして提供されているので，スケーラブルに扱えて便利です。

図5　フラットデザインのアイコンセットいろいろ

図5　フラットデザインのアイコンセットいろいろ

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

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

Google Street View Hyperlapsehttp://hyperlapse.tllabs.io/

「Google Street View Hyperlapse」は，ストリートビュー画像をつなぎ合わせて，実際にそこを移動しているような動画が作れるサービスです。このサイト上に表示されるGoogle マップの地図上で，2つの箇所を選んでしばらく待つと，間のルートが自動的に動画として再生されます。

このサイト上で再生されるだけで，動画として書きだしたり共有するような機能はありません。URLにパラメーターが入っているので，自分の作った区間をURLで人に教えることはできます。その場合，見る人の環境でまたレンダリングされることになります。

もうちょっとゆっくり動いてくれたらいいのにと思ったのですが，ストリートビュー画像を使っている関係上，素早く動かさないと不自然になるのでしょう。途中で一時停止はできます。早送り映像といったところですが，なかなか面白いです。

図6　ストリートビューから動画を作るサービス

図6　ストリートビューから動画を作るサービス

今週の気になるWebネタ

保存アイコン＝フロッピーディスクの時代は終わった…？ | MEMOPATCHhttp://memo.goodpatch.co/2013/04/about-save-icon/

保存を意味するアイコンがフロッピーディスクというのはもう古いよね，というブログ記事が話題になっていました。確かに既にレコードやカセットテープと同様の，使ったことのない世代が多数出てきてるモノなんでしょう。

しかし，じゃあ代わりにこんなのをと海外のデザイナーが考えた作品も，ピンとくるものが少ないように感じます。そこで，有名ブログcouldの「保存アイコンでみえてくるアイコンデザインの勘違い」という記事が登場し，「⁠メタファが時代遅れだから，適切なアイコンではないと解釈するのは間違っている」との意見が。

そして，その記事中の「別の議論で，そもそも『保存』という機能はいらないという意見もあります」を受けて，「⁠理想の『保存ボタン』」という記事も登場しました。「⁠保存」は自動で行われて，バージョン管理での「コミット」ボタン的なものに変わっていくというのが流れとしていいのかもしれません。ではコミットボタンはどんなメタファがいいんでしょうね。

※ なお，ドクター中松とフロッピーディスクについては，「⁠ほぼ日刊イトイ新聞 - コンピュータ用語辞典をつくろう。」のフロッピーディスクの項に簡潔にまとめてあります。ものすごく古いコンテンツですが。

Webテク, Webデザイン, Web広告, レスポンシブWebデザイン, モバイルアプリ, ストリートビュー, フロッピーディスク

著者プロフィール

芦之由（あしのよし）

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

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

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