週刊Webテク通信

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

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

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

今週の気になるWebネタ

Kindle Paperwhiteに300ppiの新モデル,1万4280円から - ITmedia eBook USERhttp://ebook.itmedia.co.jp/ebook/articles/1506/18/news073.html

Kindle Paperwhiteに新しいモデルが登場しました。画面解像度がこれまでの212ppiから300ppiにアップし,新フォント「Bookerly」が搭載されています。上位機種として既に販売されているKindle Voyageも300ppiなのですが,こちらは値段がPaperwhiteより1万円くらい高いのです。

プライム会員なら4000円引きで購入できるのと,今使っているKindle Paperwhiteが今ひとつ調子が悪いこともあって,さっそく注文したわたしです。スマホやタブレットでもKindle本は読めますが,やはりeインクのKindleで読むのがオススメだと思っています。

Kindleダイレクトパブリッシングを含め,電子書籍が話題となることが減ってきているようにも感じますが,もうちょっと盛り上がってくるといいかなと思います。ちなみにわたしはiMac 5K Retinaを最近入手したので,27インチのRetinaディスプレイでKindle for Macで見る雑誌もいいなと今さらながら気付かされました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入