gihyo.jpサイトのロゴ

週刊Webテク通信

2014年9月第3週号1位は、Call To Actionボタンのデザインについて、気になるネタは、片手で使える？：2つのiPhoneをどう選ぶ？

2014-09-18

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

1. Did You Think Designing A Call To Action Button Is Easy?http://www.designyourway.net/blog/inspiration/did-you-think-designing-a-call-to-action-button-was-easy/

ユーザーに次のアクションを促す、Call To Action（CTA）ボタンのデザインについてレクチャーした記事です。

Webデザインの中で最も重要な要素であり、Webサイトのインタラクションには不可欠なものというCTAボタンについて、以下の項目に分けて説明してあります。

  • 注目を集めるように作る
    • サイズ
    • コントラストを利用
    • うまく配置する
    • 色
    • ホワイトスペース
  • ボタンに入る文字が非常に重要

最後に実例が多数紹介してありますが、最近のフラットデザインのものでは、ボタンにほとんど余計な装飾はありません。二つのボタンを並べて、目立たせたい方にだけ色を付けるというパターンも流行っているようです。

図1　Call To Actionボタンのデザインについて
図1　Call To Actionボタンのデザインについて

2. 7 techniques to design killer graphics for your blog posts | Nathan Barryhttp://nathanbarry.com/design-graphics-blog-posts/

ブログ記事のためのグラフィックデザインテクニックを紹介しています。ブログに限らず通常のWebデザインでもヒントになりそうです。

  1. 色を追加して細部を調整する
  2. アイコンを使う
  3. 写真とアイコン
  4. テキストを面白く使う
  5. 手書き
  6. デジタルツールを使ってアナログ風に
  7. 引用やツイートをデザインする

記事内で紹介した作例のPSDファイルを配布しています。

図2　ブログ記事のためのグラフィックデザインテクニック
図2　ブログ記事のためのグラフィックデザインテクニック

3. Cheat Sheet for Comparing Bootstrap and Foundation CSS Classes ♥ Scotchhttp://scotch.io/tutorials/css/cheat-sheet-for-comparing-bootstrap-and-foundation-css-classes

CSSフレームワークの、BootstrapとFoundationのCSSクラスを比較表にしています。BootstrapからFoundationへ移行する人のためにまとめたものだそうです。

どちらかのフレームワークを利用していて、移行の予定がない人でも、エレメント別のCSSクラスの早見表として役立ちそうです。

図3　BootstrapとFoundationのCSSクラスの比較表
図3　BootstrapとFoundationのCSSクラスの比較表

4. Fresh and Free Resources for Website and Mobile Interface Designershttp://www.onextrapixel.com/2014/09/11/fresh-and-free-resources-for-website-and-mobile-interface-designers/

Webデザインに役立つフリーの素材を多数まとめた記事です。

GUI、Webサイトのレイアウトテンプレート、アイコンのカテゴリに分けて、様々な素材が掲載されています。

図4　Webデザインに役立つフリー素材いろいろ
図4　Webデザインに役立つフリー素材いろいろ

5. Die besten Apple Watch und iPhone 6 Templateshttp://designdash.de/apple-watch-iphone-6-templates/

Apple WatchとiPhone 6のテンプレート素材を多数紹介しています。画面部分に別の画像をはめ込んで使えるようになっています。

また、iPhone 6の素材をまとめた「iPhone 6 Free Mockups For Graphic Designers |Mockups | Graphic Design Inspiration」という記事もありました。

図5　Apple WatchとiPhone 6のテンプレート素材まとめ
図5　Apple WatchとiPhone 6のテンプレート素材まとめ

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

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

Colorful CSS Gradient Background Generatorhttp://www.webcore-it.com/colorful-background/

CSSによるカラフルなグラデーションの背景を生成するサービスです。ランダムに作れますし、細かく設定して作ることも可能です。

4つのグラデーションのレイヤーを重ね合わせることで、複雑なグラデーションを実現しています。4つのレイヤーそれぞれの、色相／彩度／明度をコントロールできます。しかし、スライダーで設定するだけで、数値指定はできません。

HTML、CSS、JavaScriptのコードは、Github上に用意してあり、このジェネレーターはテスト用ツールのような位置付けのようです。

ブラウザのデベロッパーツールを開くと、bodyタグに「style="background: linear-gradient」で始まるスタイルの設定が入っているので、そこからCSSによるグラデーションの設定をコピーすることが可能です。

図6　CSSによるカラフルなグラデーションのジェネレーター
図6　CSSによるカラフルなグラデーションのジェネレーター

おすすめ記事

記事・ニュース一覧