週刊Webテク通信

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

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

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

今週の気になるWebネタ

スマホがドアの鍵に!? メールやLINEで合鍵を送付 - 「Akerun」4月23日発売 | マイナビニュースhttp://news.mynavi.jp/news/2015/03/23/405/

ドアの内側の鍵に取り付けると,スマートフォンで開閉できるようになるスマートロックロボットの予約がスタートしたそうです。自宅のドアがオートロックになるので,閉め忘れのリスクが減って便利だと思います。

もちろん通常通り物理的な鍵を併用できるので,スマホがバッテリー切れの場合も大丈夫です。スマホをなくした場合には,24時間対応の電話サポートに連絡して機能を停止できるそうです。友達や恋人のスマホを合鍵代わりにできるという機能も面白いですね。

かなり興味があるのですが,我が家のドアはサムターンとドアノブがくっついているタイプなので,取付けできなそうです。今後,様々なタイプのドアに対応してくれることを期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入