週刊Webテク通信

2015年3月第4週号1位は、垂直ナビゲーションバーの実例と良い点・悪い点、気になるネタは、スマホがドアの鍵に!? メールやLINEで合鍵を送付

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

1. Vertical Navigation Bar Design: Best Exampleshttp://designwebkit.com/inspiration/vertical-navigation-bar-design-examples/

垂直ナビゲーションバーのデザイン例を紹介するとともに、良い点と悪い点とを解説した記事です。

以下のような、悪い点と解決方法が掲載されていました。

  1. 多くの場所を使ってしまう
    →テキストを短くしたり、アイコンを使ってシンプルなメニューにする
  2. 複雑な構造のサイトの場合、複数のサブカテゴリを表示するのが難しい
    →アイテムをクリックしたあと水平に変形するメニューを使う
  3. 画面の左側には重要な要素を配置したい
    →画面の中央または右側にメニューを配置する
図1 垂直ナビゲーションバーの実例と良い点・悪い点
図1 垂直ナビゲーションバーの実例と良い点・悪い点

2. The role of images in web design ? Inspired Magazinehttp://inspiredm.com/power-images/

Webデザインにおける画像の役割について解説した記事です。現在のWebデザインにおいては画像の重要度が増しているとのことで、以下の項目で説明しています。

  1. 画像はサイトに訪れた人が最初に見るもの
  2. 画像は千の言葉と同じくらいの価値がある
  3. 画像は簡単なナビゲーションを提供する
  4. ユーザーは画像を好む
図2 Webデザインにおける画像の役割
図2 Webデザインにおける画像の役割

3. Ways to make attractive anchor text - iGlobe Solutionshttp://blog.iglobe.solutions/ways-to-make-attractive-anchor-text/

魅力的なアンカーテキストを作る方法をまとめています。

  1. アンカーテキストは説明的なものに
  2. アンカーテキストは文章全体を読んでなくても意味が分かるように
  3. アンカーテキストは可能な場合は名詞に
  4. アンカーテキストは簡潔に
  5. アンカーテキストは通常のテキストとは違って見えるようにスタイリングする
図3 魅力的なアンカーテキストを作る方法
図3 魅力的なアンカーテキストを作る方法

4. Infographic: Sketch vs Photoshop | Webdesigner Depothttp://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop/

Web向けグラフィックス作成用ソフトのSketchとPhotoshopとを、対戦形式で比較したインフォグラフィックスです。

Webデザインに使うことを前提として比較しているのですが、14項目で比較して8対6でSketchの勝利という結果になっています。

この結論には異論も多そうですが、Photoshopユーザーに「Sketchも使ってみようかな」と思わせる効果がありそうなインフォグラフィックスでした。

図4 SketchとPhotoshopを比較したインフォグラフィックス
図4 SketchとPhotoshopを比較したインフォグラフィックス

5. 25+ Best Wireframing and Prototyping Tools - Designer Maghttp://designermag.org/best-wireframing-prototyping-tools/

Webサイトのワイヤーフレームやプロトタイプを作るのに便利なツールを大量にまとめています。

オンラインツールをはじめ、デスクトップアプリ、モバイルアプリなどが、新しいものから古いものまで色々と掲載されていました。

図5 ワイヤーフレーム&プロトタイプ作成ツールいろいろ
図5 ワイヤーフレーム&プロトタイプ作成ツールいろいろ

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

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

CSS SANShttp://yusugomori.com/projects/css-sans/

今回は、Webサービスではありませんが、CSSだけで作ったフォント「CSS SANS」を紹介します。CSSだけで図形や絵を描くという取り組みはいろいろと行われてきましたが、フォントを作るという発想が面白いです。

ブラウザによって表示が違うことを逆手にとって、ブラウザとバージョンとの組み合わせ毎の描画結果をフォントとしてアーカイブしていくという発想もいいですね。

これを作ったのは日本の方々ですが、海外でも大いに話題になっています。次は日本語CSSフォントも作って欲しいですね。漢字はさすがに厳しいと思いますが、ひらがなかカタカナだけでもいいので、ぜひお願いしたいです。

図6 CSSだけで作ったフォント「CSS SANS」
図6 CSSだけで作ったフォント「CSS SANS」

おすすめ記事

記事・ニュース一覧