週刊Webテク通信

2015年9月第3週号 1位は,デザイナーが今使っているツールのアンケート結果,気になるネタは,アップル、12.9インチの「iPad Pro」と「iPad mini 4」--ペンやキーボード付きカバーも

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

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

1. 2015 Subtraction.com Design Tools Survey | The Tools Designers Are Using Todayhttp://tools.subtraction.com/

デザイナーが今使っているツールを用途別にアンケートした結果を発表しています。200カ国以上の4,000人以上が回答したとのことです。

それぞれの1位は以下の結果となっています。

  • ブレインストーミングとアイデア → 紙と鉛筆
  • ワイヤーフレーム → Sketch
  • インターフェイスデザイン → Sketch
  • プロトタイプ → HTML/CSS
  • プロジェクト管理 → Slack
  • バージョンコントロール&ファイル管理 → Dropbox

Sketchが2冠となっていますが,その差はわずかでした。全体的にかなり票が割れていて,だいたい3割くらいのシェアで1位という感じです。Webデザインに使うツールが多様化しているのでしょう。

インターフェイスデザインのツールとしてはSketchがPhotoshopに僅差で勝利していますが,2番目に使っているツールも合わせて集計するとPhotoshopの方が上でした。

図1 デザイナーが今使っているツールのアンケート結果

図1 デザイナーが今使っているツールのアンケート結果

2. What You Need To Know About Anticipatory Design – Smashing Magazinehttp://www.smashingmagazine.com/2015/09/anticipatory-design/

先回りしてのデザイン(Anticipatory Design)について解説した記事です。

Anticipatoryは,⁠先回りの/予測しての」といった意味です。ユーザーの次の行動を予測して,先回りしてメニューなどを用意しておくということです。

良い実例として,FacebookやAmazonなどが紹介されていました。

図2 先回りしてのデザインについて

図2 先回りしてのデザインについて

3. Bridge » How to Use Photography in UIhttp://designerfund.com/bridge/how-to-use-photography-in-ui/

ユーザーインターフェイスで写真を使う場合のヒントを紹介しています。

写真を目立たせるのか,コンテンツを目立たせるのかといった,見た目の優先順位を付ける方法などを解説していました。

図3 ユーザーインターフェイスで写真を使う場合のヒント

図3 ユーザーインターフェイスで写真を使う場合のヒント

4. Under Construction Page Design: 50 Stunning Examples To Inspire Your Own – Design Schoolhttps://designschool.canva.com/blog/under-construction-page/

アンダーコンストラクション(工事中)ページのデザインギャラリーです。それぞれのデザインの特徴とポイントが解説されています。

「シンプルな画像と太い文字」のようなタイトルを付けた,いろいろなテイストのデザインが集まっているので,デザインのテイスト選びにも役立ちそうですね。

図4 工事中ページのデザインギャラリー

図4 工事中ページのデザインギャラリー

5. benmarkowitz.com/posters/http://benmarkowitz.com/posters/

新しいApple TVのインターフェイスでは,ビデオパッケージなどの画像が立体的に視差効果をもって動いていました。これをCSSとJavaScriptで実装したサンプルです。

作者が,"Want to play with that Parallax Previewer app? I busted up the SKYFALL poster into layers for youとツイートしていました。

なお,AppleのtvOSのデベロッパー用ページでは,この「Parallax Artwork」を作るツールが提供されているので,tvOS用に作るのはそれほどむずかしくはなさそうです。

図5 Parallax ArtworkをCSSとJavaScriptで実装

図5 Parallax ArtworkをCSSとJavaScriptで実装

そのほか,最近の記事の中から,便利なツールを紹介します。

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

HTML Color Codeshttp://htmlcolorcodes.com/

Web制作において,色を選ぶ際に必要なものをほとんど網羅したWebサービスです。

カラーピッカーから色を選び,HEX値やRGB値はもちろんCSSやSCSSでの記述も生成できます。カラーチャートや色の名前のリストも用意されています。

キーになる色を選び自動でカラーパレットを作る機能もあり,どういうルールで配色するかを選べるのはもちろん,その解説もしっかり載っているという充実ぶりです。

さらに,CSSやSCSSでの色の指定に関するチュートリアルもあり,至れり尽くせりのサービスだと感じました。

図6 Web制作での色に関することを網羅したサービス

図6 Web制作での色に関することを網羅したサービス

今週の気になるWebネタ

アップル,12.9インチの「iPad Pro」「iPad mini 4」--ペンやキーボード付きカバーも - CNET Japanhttp://japan.cnet.com/sp/iphone2015/35070280/

ついに大きいiPadが登場しました。12.9インチで,従来モデルのiPad Air/Air 2の画面を2つ並べたくらいのサイズとのことです。

専用のスタイラスペン「Apple Pencil」も発表されました。ハードウェアとソフトウェアの両方を開発しているAppleの強みが出ているようで,これまでiPhone/iPad用に出ていたサードパーティのスタイラスとは別次元のものに仕上がっていることでしょう。

絵を描く人がまず食いつきそうなiPad Proですが,ビデオ編集や写真のレタッチなど大画面を活かせるシーンはいろいろありそうです。MacBook(12インチ)より大きなサイズのiPadとなったわけですが,どう棲み分けしていくかも気になるところです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入