gihyo.jpサイトのロゴ

週刊Webテク通信

2016年5月第3週号1位は、ボタンをデザインする上で気をつけること、気になるネタは、Instagram、アプリロゴをカラフルに変更 ユーザーの“多様化”を反映

2016-05-19

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

1. Buttons in Design Systems — EightShapes LLC — Mediumhttps://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.s8hfezflx

ボタンをデザインする上で気をつけることをまとめた記事です。Primary Button、Secondary Buttons、Additional Buttonの3種類のボタンに分けて解説しています。

Primary Button （プライマリーボタン、最も重要なボタン）
  1. システム（OS）のスタイルとトーンを合わせる
  2. 言葉のトーンもシステムと合わせる
  3. 背景とまぎらわしい場合はボタンの色を反転させる
  4. プライマリーボタンは1ページに1つにする（商品一覧での購入ボタンなど、主要なボタンが繰り返される場合を除き）
  5. ボタンを押した場合など状況に応じて変化させる
  6. ラベルにアイコンなどを入れてもデザインが破綻しないようにする
Secondary Buttons（セカンダリーボタン、2番目に重要なボタン）
  1. 無効なボタンではないことが分かるようにする
  2. ゴーストボタンの場合可読性に気をつける
Additional Button（アディショナルボタン、特別なボタン）
  1. 他のボタンと異なるサイズにする
  2. テキストリンクとボタンとを区別する
  3. メニューとゾーンでバラエティ豊かに
  4. トグルボタンからツールバーまで、セットでうまく動作するボタンを作る
図1　ボタンをデザインする上で気をつけること
図1　ボタンをデザインする上で気をつけること

2. Different Tricks on How to Make Bootstrap Columns All the Same Height | Scotchhttps://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Bootstrapベースのページで、カラムの高さを揃える方法を紹介しています。

  1. JavaScriptまたはMatchHeight.jsを使う
  2. display: tableを使う
  3. ネガティブマージンと大きなパディングを使うトリック
  4. Flexboxを使う
  5. Bootstrap4向け：Flexboxを使う
  6. Bootstrap4向け：Cardsというコンポーネントを使う

1～4はBootstrapを使っていない場合にも使えるテクニックです。

図2　Bootstrapベースでカラムの高さを揃えるための方法
図2　Bootstrapベースでカラムの高さを揃えるための方法

3. How to Center in CSShttp://howtocenterincss.com/

CSSでセンター揃えするコードのジェネレーターです。センター揃えしたいのはテキストなのか領域なのか、サイズは決まっているかどうかなどの質問に答えることで、CSSが生成されます。

縦方向、横方向の両方、あるいは片方だけセンター揃えにできます。サポートするInternet Explorerのバージョンも設定できるところが気が利いています。

図3　センター揃えのCSSコードのジェネレーター
図3　センター揃えのCSSコードのジェネレーター

4. Min | A smarter, faster web browserhttps://minbrowser.github.io/min/

シンプルなオープンソースのWebブラウザです。広告・トラッキング／画像／スクリプトをブロックする設定があり、WebKitブラウザでおなじみの開発ツール（Webインスペクタ）も出せます。

ただシンプルなだけでなくUIも工夫されており、使っていて気持ちがいいブラウザです。

図4　シンプルなオープンソースのWebブラウザ
図4　シンプルなオープンソースのWebブラウザ

5. The New Instagram Logo in CSS, Four Ways - CodePen Bloghttps://blog.codepen.io/2016/05/13/new-instagram-logo-in-css-four-ways/

Instagramの新しいロゴをCSSだけで実現した例を、コード共有サイトCodePenから紹介しています。おまけとして古いロゴをフラットデザインにしたものも載っていました。

この新ロゴのグラデーションだけを流用するのもアリかもしれません。

図5　Instagramの新しいロゴをCSSだけで実現
図5　Instagramの新しいロゴをCSSだけで実現

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

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

COLORIONhttp://www.colorion.co/

COLORIONは、5色のカラーパレットを探せるサービスです。フルカラーとマテリアルデザインに分けて豊富なカラーパレットが提供されています。ひとつの色をベースに関連したカラーパレットを検索でき、カラーチップをクリックするとHEX値がコピーされます。

自分でカラーパレットを作ることはできませんが、気に入ったカラーパレットは保存できます。保存にはTwitter／Facebook／Googleのいずれかの認証を使ったログインが必要ですが、カラーパレットはそれぞれ独自URLを持っているので、ブックマークすればログイン不要です。

カラーパレットの詳細ページでは、各色のRGB値やHSL値、補色、やや明るくした色、やや暗くした色も掲載されていて便利です。類似のサービスはいろいろありますが、シンプルで使用感が快適なサービスです。

図6　5色のカラーパレットを探せるサービス
図6　5色のカラーパレットを探せるサービス

おすすめ記事

記事・ニュース一覧