週刊Webテク通信

2017年5月第2週号1位は、Photoshop&IllustratorからSketchへの移行のススメ、気になるネタは、Microsoftが学校用軽量版、Windows 10 Sを発表――Google Chromebookに対抗

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

1. Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers – Smashing Magazinehttps://www.smashingmagazine.com/2017/04/photoshop-illustrator-sketch-ui/

Adobe Photoshop&IllustratorからSketchに移行することを推奨する記事です。UIデザインやウェブデザイン、アイコンデザインを行うのなら、Sketchを使ってみることを強く勧める理由などが書いてあります。

この記事の著者は、まずPhotoshopからIllustratorに移行しようとしたのですが、以下のような点からIllustratorに不満があり、Sketchならそれが解決できたということです。

  • モバイルデバイスでのプレビュー機能がない
  • 以前作ったアイコンの再利用や、サイズ・色の変更をシンプルで簡単に行えない
  • エレメント間の距離などの詳細情報を簡単にまとめられない
  • シンボルとライブラリはカラーバリエーションを作る場合などに機能不足
  • テキストデータを読み込んでデザインの一部を変更することはプラグインで可能だが限界がある

後半はSketchの良さを紹介しているのですが、ほとんどがプラグインの紹介です。プラグインを活用することがSketchを使っていく上でのポイントだと感じました。

図1 Photoshop&IllustratorからSketchへの移行のススメ
図1 Photoshop&IllustratorからSketchへの移行のススメ

2. Stunning Examples of White Space… That Aren’t White at All | Design Shackhttps://designshack.net/articles/graphics/stunning-examples-of-white-space-that-arent-white-at-all/

ホワイトスペースをうまく使ったデザイン例を5つ紹介しています。

可読性とレイアウトの構成において重要な役割を果たす、ホワイトスペースの効果がまとめられていました。

  • 文字に目を通しやすくする
  • 類似の要素を自然にグループとしてとらえられるようにする
  • ボタンやナビゲーションなどに優先順位を付ける
  • バランスと見た目の階層構造を確立する
  • 大量のテキストブロックを読みやすくする
  • 論理的なデザイン手法によってユーザーを案内する
図2 ホワイトスペースをうまく使ったデザイン例5選
図2 ホワイトスペースをうまく使ったデザイン例5選

3. Analyzing the Effectiveness of Hamburger Menushttps://speckyboy.com/analyzing-effectiveness-hamburger-menus-web-design/

ハンバーガーメニューを分析した記事です。ハンバーガーメニューの欠点や最適化するためのヒントをまとめています。

  • 目的のリンクに行き着くための操作数が増えるなど効率を悪くしている
  • ユーザーに使い方が理解されていないかもしれない
  • ハンバーガーメニューの型にとらわれない
図3 ハンバーガーメニューの分析
図3 ハンバーガーメニューの分析

4. How to Set CSS Margins and Padding (And Cool Layout Tricks) — SitePointhttps://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/

CSSのマージンとパディングについての初歩的な解説と、レイアウトする上でのテクニックを紹介した記事です。

縦横比が違う複数の画像を、縦横比は維持したまま余白を付けて同じサイズにして並べるテクニックが役立ちそうです。

図4 CSSのマージンとパディングの使い方
図4 CSSのマージンとパディングの使い方

5. 20 Sketch Sheets and Templates for Designing Web and App Layoutshttp://www.webdesigndev.com/sketch-sheets-templates/

ウェブデザインやモバイルアプリデザインの手描きスケッチをするための用紙テンプレートや、デジタルでワイヤーフレームを作るときに便利なテンプレートファイルを配布しているサイトをまとめています。

フローチャートを作るための素材やインフォグラフィックスの素材などもありました。

図5 手描きスケッチの用紙やテンプレート集
図5 手描きスケッチの用紙やテンプレート集

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

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

Sizzyhttp://sizzy.co/

Sizzyはモバイルデバイスでの表示チェックのためのサービスです。レスポンシブウェブデザインの表示確認ツールはほかにもいろいろありますが、シンプルでデザインも良く、複数デバイスの表示をまとめてチェックできます。

iOSとAndroidのスマートフォン、タブレット数機種の表示サイズがあらかじめ設定されています。もちろん縦画面・横画面に表示を切り替えられます。デバイスを追加する機能も搭載予定のようです。

Chrome拡張機能を使うと、見ているサイトをボタン1つでチェックできます。ローカルサーバーでもチェックできるので、Bracketsのライブプレビュー機能でChromeで表示したサイトを、拡張機能を使ってチェックするという使い方が便利だと思いました。

図6 モバイルデバイスでの表示チェックサービス
図6 モバイルデバイスでの表示チェックサービス

おすすめ記事

記事・ニュース一覧