週刊Webテク通信

2013年4月第1週号1位は、モバイル向けインタラクションデザインの考察、気になるネタは、ヤフーとNHN Japanがネット検索で提携、NAVERまとめ取り込みで「回答力」高める

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

1. Designing for Mobile, Part 2: Interaction Design - UX Booth | UX Boothhttp://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

モバイル向けデザインについて考察した記事です。この記事の前にパート1もあり、パート1では「Information Architecture(情報構築⁠⁠、このパート2は「Interaction Design(対話型操作のデザイン⁠⁠」について掘り下げています。

タッチによるアクションがどのような操作になるのかを、iOS/Android/Windows 8で比較した表が興味深いです。つまむ/ひろげるという操作がズームイン/ズームアウトなのはどのOSでも共通なのですが、長押しや二度押し(ダブルタップ)のように微妙に違いがあるものもあります。

また、実際のモバイルアプリでのUIパターン例の画像も豊富で、いろいろと参考になりそうです。

図1 モバイル向けデザインの考察
図1 モバイル向けデザインの考察

2. CSSDB: A Database Of CSS Librarieshttp://cssdb.co/

CSSライブラリのデータベースサイトです。CSS、Sass、LESS、Stylusのライブラリを人気順や新着順で見ることができます。ちなみに人気ベスト3はBootstrap、Foundation、normalize.cssでした。

登録されている数はそれほど多くないようですが、厳選して登録しているということです。

図2 CSSライブラリの厳選データベース
図2 CSSライブラリの厳選データベース

3. 50 Time-Saving Web Design - Developer Tools - Designmodohttp://designmodo.com/web-design-developer-tools/

Webサイト制作の時間短縮に繋がるツールを多数紹介しています。

  • モックアップ作成
  • アイコン
  • テクスチャー
  • ストックイメージ
  • フォント
  • ツール

上記カテゴリに分けて紹介されていました。

図3 サイト制作の時間短縮ツールいろいろ
図3 サイト制作の時間短縮ツールいろいろ

4. Showcase of Websites with Cool and Colorful Illustrations | Splashnologyhttp://www.splashnology.com/article/showcase-of-websites-with-cool-colorful-illustrations/8618/

カラフルなイラストを使ったWebサイトのギャラリーです。

サイト内で全面的にイラストが使われているサイトばかりで、見ていて楽しいのですが作るのは大変そうですね。

図4 カラフルなイラストが全面的に使われたWebサイトのギャラリー
図4 カラフルなイラストが全面的に使われたWebサイトのギャラリー

5. Adobe Creative Suite Keyboard Shortcuts | Enfuzedhttp://enfuzed.com/adobe-creative-suite-keyboard-shortcuts/

Adobe Creative Suiteの各アプリケーションのキーボードショートカットを、かっこよくインフォグラフィック風にまとめています。

高解像度の画像なので、プリントして使ってくださいということなのでしょう。

図5 Adobe CSのキーボードショートカット集
図5 Adobe CSのキーボードショートカット集

そのほか、最近の記事の中から、Webサービスとフォントに関する記事を紹介します。

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

Draft. Write Better.http://draftin.com/

Draftは、バージョン管理とコラボレーション機能を持った、オンラインメモ/ノートのサービスです。非常にシンプルな画面で文字を打つことに集中できるのですが、実は機能もかなり充実しています。

作成した書類はこのサービスに保存しておくことができるのはもちろん、Dropbox、Google Drive、Evernoteなどに書き出すこともできます。Dropboxに保存してみたのですが、以降その書類を書き換えるたびに自動で同期されるようになりました。

書類の作成中に、右上の「MARK DRAFT」ボタンを押すと、そのときの状態にいつでも戻せるようになります。複数段階の履歴を管理でき、更新した箇所が分かるように表示してくれます。自動保存ではないのですが、この方が便利だと思います。

試していないのですが、コラボレーション機能もあり、同じ書類を共有して編集できるようになっています。また、⁠ASK A PRO」というボタンがあり、有料でプロの人に校正してもらえるという面白い仕組みもあります。

テキストの検索は日本語もOKでしたし、フォントの指定で日本語フォントも指定できました。かなり今後に期待できるサービスだと感じています。

図5 オンラインワープロとも呼べるDraft
図6 オンラインワープロとも呼べるDraft

おすすめ記事

記事・ニュース一覧