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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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