週刊Webテク通信

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

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

ネットで見かけた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でのグリッドの設定方法を学べるツール

今週の気になるWebネタ

ビックカメラ,ARで家電配置 購入前にイメージ確認 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1710/16/news065.html

iOS 11でARアプリの開発環境がサポートされたため,iPhoneのARアプリが数々登場し盛り上がっています。そんな動きに合わせて,AR技術を利用して実物大の家電を自宅などに表示したイメージを確認できるサービスをビックカメラが始めました。

面白いアイデアだと思ったのは,ARマーカーとしてビックカメラのポイントカードが使えるということです。カードがなくてもARマーカー画像をダウンロードしてプリントアウトして使うこともできます。

試してみたところ,家電のイメージは3Dではなく平面で,書き割りを置いているような感じで見えます。アプリは汎用のもので,画像を元に低コストで実装できるサービスなのでしょう。もちろん,家電を配置したときのサイズ感やインテリアとの相性の確認には便利に使えそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入