週刊Webテク通信

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

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

ネットで見かけた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色のカラーパレットを探せるサービス

今週の気になるWebネタ

Instagram,アプリロゴをカラフルに変更 ユーザーの“多様化”を反映 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1605/11/news179.html

Instagramのアイコンがレインボーカラーに変更され,話題となっています。スキュアモーフィズム(現実のモノを模したデザイン)を貫いていた希少な存在が,ついにフラットデザインになったところが興味深いです。

反応は予想通り,⁠前の方が良かった」⁠元に戻せ」という意見が大多数のようです。あのレトロなアイコンに愛着のあった人が多いようですし,自動アップデートで勝手にアイコンが変わり,Instagramがなくなったとあせった人もいたらしいです。

似てるアイコンがたくさんあるという声も多いですが,今後他のアプリはInstagramのアイコンと類似しないように意識せざるを得ないんじゃないでしょうか。アプリのデザインも変わって青い帯がなくなったので,インスタボードを作っていた人はリニューアルしなくちゃいけませんね。⁠インスタボードって何?」という人は,⁠インスタボード」で画像検索してみてください。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入