週刊Webテク通信

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

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

ネットで見かけた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によるカラフルなグラデーションのジェネレーター

今週の気になるWebネタ

片手で使える?:2つのiPhoneをどう選ぶ?――「iPhone 6」「iPhone 6 Plus」に触れてみた - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1409/10/news155.html

ついにiPhone 6 / 6 Plusが発表され,いろいろと話題になっています。この2つのiPhoneのサイズに関する話題も多く,iPhone 6 Plusのサイズが「千円札と同じくらいだ」⁠⁠いや,1万円札のほうが近い」などといったことでも盛り上がっていました。

結局,iPhone 6 Plusは,1万円札,ガーナチョコレート,アルフォートなんかと同じくらいのサイズのようです。我が家でも,妻と1万円札を指ですりすりしてみて,⁠やっぱり使いにくいよね」⁠ぺらぺらだからね」などと根本的に間違った感想を言い合ったりしてました。

早く実際に触ってみたいと思いますが,店頭ではポケットに入れてみることはできないですよね。しばらく使ってみないと使用感もわからないでしょうし,iPhone 6にするか6 Plusにするかの選択は,非常に難しいと思います。LINEのツムツムなどのゲームをやっている人も,画面の大きさが変わると操作感がかなり変わってきそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入