週刊Webテク通信

2017年10月第3週号1位は、良いボタンを作るための5つのテクニック、気になるネタは、ビックカメラ、ARで家電配置 購入前にイメージ確認

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

1. 5 Design Techniques for Better CTA Buttons | Webdesigner Depothttps://www.webdesignerdepot.com/2017/10/5-design-techniques-for-better-cta-buttons/

良いボタンを作るためのテクニックを5つ紹介しています。

  1. 見た目が目立つボタン
  2. 行動をうながすテキスト
  3. スクロールなしで見られる場所に配置する
  4. 角丸の大きなボタン
  5. 選択肢は少ない方が良い
図1 良いボタンを作るための5つのテクニック
図1 良いボタンを作るための5つのテクニック

2. The 8 biggest typography mistakes designers make | Creative Bloqhttp://www.creativebloq.com/typography/mistakes-41411451

デザイナーがやりがちなタイポグラフィーの間違いについてまとめた記事です。

  1. 読みにくい
  2. トラッキングし過ぎ
  3. トラッキングとカーニングとの混乱
  4. タイプフェイスとウェイトの種類を多く使いすぎる
  5. 一行の長さを適切に設定できていない
  6. コントラストが適切ではない
  7. センター揃えのテキストを全体的に使ってしまう
  8. 文末に2つのスペースを入れる
図2 デザイナーがやりがちな8つのタイポグラフィーの間違い
図2 デザイナーがやりがちな8つのタイポグラフィーの間違い

3. Splash Screen Revival: Web Design Trend Showcasehttps://line25.com/articles/web-design-trend-showcase-splash-screen-revival

最近のウェブデザインのトレンドして、スプラッシュスクリーンが復活してきているとのことで、その事例を多数紹介しています。

といっても、全く新しいトレンドでも、昔のようなスプラッシュスクリーンの使い方に戻っているわけでもありません。

1ページ完結型のような見せ方のページで、スクロールする前の最初のページが全画面でスプラッシュスクリーンのようになっているということですね。

図3 スプラッシュスクリーンの復活とその事例
図3 スプラッシュスクリーンの復活とその事例

4. 120+ Great Cheat Sheets for WordPress, Web Developers and Designershttps://www.codeinwp.com/blog/wordpress-cheat-sheets-web-development-design/

ウェブ制作に役立つチートシート(カンニングペーパー)をまとめた記事です。

WordPress、CS、HTML、デザイン、PHP、JavaScript、MySQL、開発、その他にわけて、それぞれいくつかのチートシートへのリンクを紹介しています。

図4 ウェブ制作に役立つチートシートいろいろ
図4 ウェブ制作に役立つチートシートいろいろ

5. You can get pretty far in making a slider with just HTML and CSS | CSS-Trickshttps://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

HTMLとCSSだけでスライダーを作る方法を解説しています。JavaScriptなしでどれだけできるかの実験的な内容です。

最後にHTMLとCSSだけでさらにできそうなことや、JavaScriptではないとできないことがまとめられています。

Flexboxを使うと簡単にスライドできる領域が作れて、タッチ対応にしたり、特定の幅でスナップするように設定できるなど、知らないことがたくさんありました。

図5 HTMLとCSSだけでスライダーを作る方実験
図5 HTMLとCSSだけでスライダーを作る方実験

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

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

Griddyhttp://griddy.io/

CSS Gridでのグリッドを、プレビューで確認しながら作れるサービスです。ColumnとRowを設定し、複数のアイテムがどう配置されるのかとCSSコードとを確認できます。

この手のツールはいろいろありますが、CSS Gridについて理解していないとどう使っていいのか分からないものが多いのが現状です。このサービスはとにかくいじってみることが簡単で、分かりやすいです。

その分単純化されていて、各アイテムごとの設定ができないので、複雑なレイアウトを組むことができません。単純なグリッドを操作してみて、CSS Gridの基本の仕組みを知る勉強に役立つためのツールのようです。

図6 CSS Gridでのグリッドの設定方法を学べるツール
図6 CSS Gridでのグリッドの設定方法を学べるツール

おすすめ記事

記事・ニュース一覧