週刊Webテク通信

2015年4月第4週号 1位は，スタイルタイルでデザインを円滑に進める方法，気になるネタは，女子高生の間で不思議な透明画像「インスタインマイハンド」が流行中

Webテク, Webデザイン, Web広告, HTML, CSS, レスポンシブWebデザイン, チートシート

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

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

1. How to use HTML & CSS style tiles to kickstart your design | Webdesigner Depothttp://www.webdesignerdepot.com/2015/04/how-to-use-html-css-style-tiles-to-kickstart-your-design/

HTML＆CSSのスタイルタイル（Style Tile）を，デザインの初期段階でどう使うのかを解説した記事です。

スタイルタイルは，配色やフォント，UIエレメントなどのデザイン見本用テンプレートです。クライアントにデザインテイストを選んでもらうために，ページ全体のモックアップを複数パターン作成するのは大変だということから考えられたものです。

スタイルタイルを使うことで，デザインのパターンを試行錯誤するのもスピードアップしますし，クライアントとのやり取りも円滑に進むということですね。

この記事では，スタイルタイルのテンプレートを配布している記事へのリンクなど，関連記事へのリンクがいろいろと紹介されていました。

図1　スタイルタイルでデザインを円滑に進める方法

図1　スタイルタイルでデザインを円滑に進める方法

2. How To Utilize Negative Space in Web Design | Tipshttp://webdesignledger.com/tips/howto-use-negative-space-in-web-design

Webデザインにおいてホワイトスペース（ネガティブスペース）をどう活用するかを解説した記事です。

  • 空のスペースは無益ではない
  • コンテンツの階層をはっきりさせる
  • 文字を読みやすくする
  • ページ内のグループ間のバランスを取る
  • 巨大 vs 微小のホワイトスペース

最後の締めの文では，ホワイトスペースを人間にとっての睡眠や水に例えていました。健康に生きていくには不可欠なものだけど，多すぎても不快になるということです。

図2　Webデザインにおけるホワイトスペースの活用について

図2　Webデザインにおけるホワイトスペースの活用について

3. 25 Inspiring Examples of Ultra Minimal Web Designhttp://line25.com/articles/25-inspiring-examples-of-ultra-minimal-web-design

ミニマルなWebデザインを多数掲載したギャラリーです。

ホワイトスペースを活用した実例として，参考になりそうなデザインが並んでいます。

図3　ミニマルなWebデザインのギャラリー

図3　ミニマルなWebデザインのギャラリー

4. Using Sketch For Responsive Web Design (A Case Study) - Smashing Magazinehttp://www.smashingmagazine.com/2015/04/17/using-sketch-for-responsive-web-design-case-study/

Sketchを使ってレスポンシブWebデザインを行うケーススタディです。

最初の段階で，スタイルタイルを使ってデザインするという説明が出てきました。ここでも，スタイルタイルが出てきましたね。

レスポンシブWebデザインの場合，フレームワークをベースにモックアップから作るという方法もありますが，この記事を参考にSketchを使ってデザインの検討をしていく方法も良さそうです。

図4　Sketchを使ったレスポンシブWebデザイン制作のケーススタディ

図4　Sketchを使ったレスポンシブWebデザイン制作のケーススタディ

5. 40 Fresh Award Winning Websites | Inspiration | Graphic Design Junctionhttp://graphicdesignjunction.com/2015/04/award-winning-websites-2015/

賞を受賞したWebデザインを集めたギャラリー記事です。

ポートフォリオサイトや企業サイトなど40サイトが紹介されています。

図5　賞を受賞したWebデザインのギャラリー

図5　賞を受賞したWebデザインのギャラリー

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

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

Build Cheat Sheets and Share Your Favourites! - Cheatography.com: Cheat Sheets For Every Occasionhttp://www.cheatography.com/

Cheatographyは，チートシートの共有サービスです。自分でチートシートを作って公開できますし，他の人が作ったチートシートを探して利用するのもいいでしょう。

チートシートとは「カンニングペーパー」のことなのですが，テクノロジー系ではショートカットキーやよく使うコードやコマンドなどを1ページにプリントアウトできる程度にまとめたものを指します。たとえばこのサービスで「Photoshop」で検索すると，キーボードショートカットのチートシートが見つかりました。

このサービス上でチートシートを作る場合，一項目ずつフォームに入力していく必要があるので，ちょっと面倒そうでした。別途作ったPDFなどをアップロードすることもできるので，自分で何かしらのソフトを使って作れる人はその方が楽そうです。

図6　チートシートの共有サービス

図6　チートシートの共有サービス

今週の気になるWebネタ

女子高生の間で不思議な透明画像「インスタインマイハンド」が流行中 未来感ある！ - ねとらぼhttp://nlab.itmedia.co.jp/nl/articles/1504/14/news099.html

インスタグラムの自分のホーム画面のスクリーンキャプチャを，半透明にして手に持っているように合成した写真「インスタマイハンド」がはやっています。インスタグラムに限らず，Facebookなど別のサービスのキャプチャ画像を使っているものも見かけますね。

Photoshopを使えば簡単にできる合成ですが，「⁠PicsArt Photo Studio」というiOSとAndroid両方で使える無料アプリで作る方法が広まっています。このアプリのダウンロード数は飛躍的に増えたんではないでしょうか？

この「インスタインマイハンド」にしろ，VineやMixChannelへの動画投稿にしろ，若者たちはスマホを何かをクリエイトするツールにも使っていることは，いい傾向だと思います。

なお，「⁠インスタマイハンド」と入力しようとすると「イン須玉違反度」と変換されて，ちょっとウケました。

Webテク, Webデザイン, Web広告, HTML, CSS, レスポンシブWebデザイン, チートシート

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote