週刊Webテク通信

2015年6月第4週号1位は、SVGをWebで利用するための実践的ガイド、気になるネタは、Kindle Paperwhiteに300ppiの新モデル、1万4280円から

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

1. A Practical Guide to SVGs on the webhttps://svgontheweb.com/

SVGファイルをWebで利用するための実践的なガイドです。SVGを使う上で気をつける点やテクニックなどをサンプルとともに解説しています。

Webページ上に表示するためのObjectタグ、Inlineタグなどの指定方法や比較、色を付けたりアニメーションさせる効果などが紹介されていました。

図1 SVGをWebで利用するための実践的ガイド
図1 SVGをWebで利用するための実践的ガイド

2. 3 essential rules for effective navigation design | Webdesigner Depothttp://www.webdesignerdepot.com/2015/06/3-essential-rules-for-effective-navigation-design/

効果的なナビゲーションデザインのための3つのルールを紹介しています。

  1. 情報アーキテクチャーを最初に完成させる
  2. シンプルさを保つ(時によっては)
  3. 注意深く方向性を決める

2つ目の項目では、一見シンプルに見えて深い項目にまでたどり着けるような情報アーキテクチャの設計が必要ということが解説されています。シンプルさが重要というのは共通認識ですが、必ずしも常にそれだけではないということですね。一見シンプルな4項目のメニューながら、メガメニューになっていて深い階層まで選べるマイクロソフトのサイトが例として取り上げられていました。

図2 効果的なナビゲーションデザインのための3つのルール
図2 効果的なナビゲーションデザインのための3つのルール

3. A Detailed Guide To WordPress Custom Page Templateshttp://www.smashingmagazine.com/2015/06/19/wordpress-custom-page-templates/

WordPressでの固定ページ用テンプレートについて詳しく解説した記事です。

固定ページ用テンプレートの活用法として5つのアイデアが載っていました。

  1. 横幅一杯まで使った1カラムのテンプレート
  2. ダイナミックな404エラーページ
  3. カスタム投稿タイプ用のテンプレート
  4. プロフィール写真付きの投稿者ページ
  5. カスタマイズされたアーカイブページ
図3 WordPressの固定ページ用テンプレートのガイド
図3 WordPressの固定ページ用テンプレートのガイド

4. Useful Flexbox Technique: Alignment Shifting Wrapping | CSS-Trickshttps://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/

CSSのFlexboxを使ったテクニックのサンプルです。

見出し&小見出しを横に並べて小見出しは右添えにし、ウィンドウサイズが小さいときには2行で並ぶようにしています。メディアクエリを使わずに、Flexboxのテクニックで実現しているのがポイントですね。

図4 CSSのFlexboxを使ったテクニック
図4 CSSのFlexboxを使ったテクニック

5. 15 Websites that Use Typography Correctlyhttp://www.1stwebdesigner.com/15-websites-that-use-typography-correctly/

タイポグラフィを正しく使ったWebサイトを15個紹介した記事です。

各サイトで利用されているフォントについての説明のあと、MyFontsサイトのフォントページへのリンクも用意されています。

図5 タイポグラフィを正しく使ったWebサイトのギャラリー
図5 タイポグラフィを正しく使ったWebサイトのギャラリー

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

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

4 Greatest Online Collaboration and Project Management Toolshttp://smallbiztrends.com/2015/06/online-collaboration-and-project-management-tools.html

今回はオンラインのコラボレーションとプロジェクトマネージメントのためのWebサービスを4つ取り上げた記事を紹介します。Basecamp以外は知らないサービスでしたが、どれも有名なもののようです。

Redboothはチームでプロジェクトマネージメントをするためのツールで、チャットやファイルの共有をはじめ、スケジュールやタスク管理ができます。多くの言語に対応しており、日本語も対応言語に含まれています。

Huddleはセキュアなファイルの共有を実現するコラボレーションツールです。10万以上の企業や180以上の政府機関で使われており、アメリカ政府、イギリス政府でも使われているとのことでした。

図6 コラボレーション&プロジェクトマネージメントツールを4つ紹介
図6 コラボレーション&プロジェクトマネージメントツールを4つ紹介

おすすめ記事

記事・ニュース一覧