週刊Webテク通信

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

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

ネットで見かけた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

今週の気になるWebネタ

ニュース - ヤフーとNHN Japanがネット検索で提携,NAVERまとめ取り込みで「回答力」高める:ITprohttp://itpro.nikkeibp.co.jp/article/NEWS/20130328/466823/

ヤフー(Yahoo! JAPAN)「NAVERまとめ」と連携するそうです。Yahoo!検索でNAVERまとめの記事が検索できるようになったり,NAVERまとめのサイト内でもヤフーのエンジンで検索できるようになるようですね。

記事内にある,NAVERまとめの「月間約12億2800万ページビュー,4100万ユニークユーザー」という数字には驚きです。NAVERまとめについている検索はたしかに今ひとつなので,検索機能が向上するともっとページビューは増えるんじゃないでしょうか。

4月1日にはNHN Japanが「LINE株式会社」に社名変更したので,⁠ヤフーがLINEと提携」ということになり,⁠カカオトークの立場は…」とも思ったりもします。まあ,AppleとGoogleの関係もそうですが,IT企業は対立する部分と協力する部分と両方あるのが普通のようですが。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入