gihyo.jpサイトのロゴ

週刊Webテク通信

2016年3月第3週号1位は、Webデザインを学ぶための全12章のebook、気になるネタは、マイクロソフト、Evernoteデータ引越しツールOneNote Importer公開

2016-03-17

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

1. Web Design 101 | A free Webflow ebookhttp://ebooks.webflow.com/ebook/web-design-101

コードを書かずにWebサイトを作れる「Webflow」が提供する、Webデザインを学ぶためのebookです。

全12章の読み応えのある内容となっています。

  1. Webデザイナーに不可欠なビジュアルデザインの原則
  2. 色彩理論
  3. Webでのタイポグラフィ
  4. 要素をどう配置するか
  5. UIデザインで重要なこと
  6. モバイルのための設計
  7. 効果的なインタラクションを設計する方法
  8. 高性能なWebサイトを構築
  9. ランディングページをデザインする方法
  10. デザインプロセスはコンテンツから始める必要がある理由
  11. モックアップだけでなくプロトタイプを作るべき
  12. リリース前に必要なチェックリスト

なお、このebook自体がWebflowで作られています。

図1　Webデザインを学ぶためのebook
図1　Webデザインを学ぶためのebook

2. Right Click Logo to Show Logo Download Options | CSS-Trickshttps://css-tricks.com/right-click-logo-show-logo-download-options/

Webページ左上にロゴがありクリックするとTOPページに戻るのは定番ですが、そのロゴを右クリックするとロゴダウンロードの案内が出るというテクニックを紹介しています。

ロゴ画像を保存しようと右クリックすると、ベクターデータなどをダウンロードできるように誘導されるというのは、素晴らしいアイデアだと感心しました。

図2　ロゴを右クリックするとロゴダウンロードの案内が出るテクニック
図2　ロゴを右クリックするとロゴダウンロードの案内が出るテクニック

3. Use These Chrome Design Extensions for a Smoother Workflowhttp://spyrestudios.com/chrome-design-extensions/

Webデザインに役立つChrome拡張機能をまとめた記事です。

以下のようなツールが掲載されています。

  • フォントを調べる
  • レスポンシブの表示チェック
  • 見ているページをその場で編集
  • ページ内の画像をまとめてダウンロード
  • サイズを測る定規を表示する
図3　Webデザインに役立つChrome拡張機能いろいろ
図3　Webデザインに役立つChrome拡張機能いろいろ

4. New Trendy Web Design Ideas And Examples | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2016/03/new-trendy-web-design/

最近の流行に乗ったWebデザインを集めたギャラリーです。

画面一杯にビジュアルが表示されて、アニメーションする要素があるような、デザインにかなり凝ったサイトがほとんどでした。

図4　最近の流行に乗ったWebデザインのギャラリー
図4　最近の流行に乗ったWebデザインのギャラリー

5. The 15 Best Material Design Frameworks and Libraries | Tutorialzinehttp://tutorialzine.com/2016/03/the-15-best-material-design-frameworks-and-libraries/

マテリアルデザインのフレームワークとライブラリから、オススメの15個を紹介しています。

フロントエンドフレームワークのBootstrapやFoundationをマテリアルデザインにしたフレームワークもありました。

図5　マテリアルデザインのフレームワークとライブラリ15選
図5　マテリアルデザインのフレームワークとライブラリ15選

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

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

Instant Logo Searchhttp://instantlogosearch.com/

企業やブランド、アプリケーションやサービスなどのロゴを探してダウンロードできるWebサービスです。ロゴはベクター形式のSVGか透過のPNGで保存できます。

検索窓にタイプしていくと、インクリメンタルサーチでロゴが絞り込まれていきます。検索結果が多い場合も最初は20個しか表示されないのですが、「⁠Show More」ボタンでさらに登場し、あとは無限スクロールでどんどん表示されていきます。

数千のロゴがあるとうたっており、有名な企業やWebサービスのロゴはだいたい揃っているようです。国旗もあります。ロゴをSVGでアップロードできるので、今後ますます充実していくんじゃないかと思います。

図6　ロゴを探してダウンロードできるWebサービス
図6　ロゴを探してダウンロードできるWebサービス

おすすめ記事

記事・ニュース一覧