週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入