週刊Webテク通信

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

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

ネットで見かけた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サービス

今週の気になるWebネタ

マイクロソフト,Evernoteデータ引越しツールOneNote Importer公開。Windows対応,Mac版も予定 - Engadget Japanesehttp://japanese.engadget.com/2016/03/14/evernote-onenote-importer-windows-mac/

マイクロソフトのOneNoteに,Evernoteのノートを取り込むツールが公開されました。OneNoteは評判が良いようですし,Evernoteのような容量制限がないところも魅力のようです。マイクロソフト製とはいえMac版もiOS版もありますし,お金を払ってまでEvernoteを使おうとは思わないライトユーザーの選択肢としては悪くないのでしょう。

また,Mac&iPhoneの組み合わせのユーザーには,標準アプリの「メモ」もおすすめです。画像やムービーはもちろん,PDFやOfficeファイルなんかも貼れるようになり,かなりEvernoteに近づいています。Evernoteからメモへの移行ツールも登場する予定があるようです。

有料版でEvernoteを使っているユーザーとしては,まだまだEvernoteにも頑張って欲しいですね。しかし,人に紹介するときに,とりあえずEvernoteを勧めておけばOKという状況じゃなくなっていることも実感しています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入