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

1. 8 Rules for Creating an Effective Responsive Website or App | Design Shackhttps://designshack.net/articles/layouts/8-rules-for-creating-an-effective-responsive-website-or-app/

効果的なレスポンシブウェブサイト／アプリを作る8つのルールを紹介しています。

1. 混乱させないデザイン
2. タスクを完了できるようにする
3. 分かりやすく簡単なボタンをつくる
4. 入力データに合わせたキーボードを表示する
5. シンプルな言葉をつかう
6. エラーへの対策を心がける
7. ビデオを使うときは慎重に
8. 一貫性のあるデザイン

2. Unique Ways to Integrate Social Media into Web Design | Webdesigner Depothttps://www.webdesignerdepot.com/2018/11/unique-ways-to-integrate-social-media-into-web-design/

ウェブデザインにソーシャルメディア要素を統合するユニークな方法を紹介しています。

1. ハッシュタグ（#）とアカウント名（@）をデザインに加える
2. 通知マークを使う
3. タイムラインをデザインする
4. クイズやチャットで訪問者と話す

3. Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Trickshttps://css-tricks.com/fun-tip-use-calc-to-change-the-height-of-a-hero-component/

CSSの「calc()」を使って，メインイメージ領域の高さを調整する方法を解説した記事です。

ブラウザウィンドウの横幅を元に，計算式によってフォントサイズや領域の高さをコントロールしたサンプルを紹介しています。

4. 13 Web Design Process Templates to Make Every Design Amazing | Process Streethttps://www.process.st/web-design-process/

ウェブデザインプロセスのチェックリストを13個用意しています。

各ソーシャルメディア用の画像サイズやフォーマット，ファイル容量などのチェック項目があり，この通りに作業を進めればミスを防げるということでしょう。

5. Scalablehttps://scriptartist.github.io/Scalable/

縦横比は守りつつ，領域に合わせてサイズが可変するコンテンツを作れるスクリプトです。

領域一杯に広がらない場合，縦方向，横方向のセンター揃えになります。

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

• Amazon，Appleの正規販売代理店に iPhoneなどを販売開始，日本含む - ITmedia NEWS
  「⁠2019年1月4日以降は，Amazon以外がApple製品をAmazon.comで販売できなくなる」とのことです
• アップルのマップが大幅に改善，植生分布や建物形状の正確さはGoogleマップを上回る評価 - Engadget 日本版S
  リニューアルされたエリアは非常に狭いものの，かなり進歩しているようです
• アップル，「⁠iMovie」「⁠GarageBand」「⁠iWork」アプリをアップデート - CNET JapanS
  iPad/iPhoneのiMovieで，外部ディスプレイで動画プレビューできるようになったそうです

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

Meta Tags — Preview, Edit and Generatehttps://metatags.io/

各ソーシャルメディア用のプレビューとメタタグの生成／編集ができるサービスです。Facebook，Twitter，LinkedIn，Pinterest，Slackで記事をシェアしたときのプレビューが見られるのが特に便利です。

URLを入力すると，メタタグとプレビューを確認できます。元ページに「meta description」が入っていれば，Facebook，Twitter用のOGPタグを生成できます。サムネイル用の画像をアップロードできますが，あくまでもこのサービス上でプレビューするためのものなので注意が必要です。

メタタグの生成より，各種ソーシャルメディアでシェアしたときの見た目を確認する用途の方がニーズが高そうです。なお，このサービスはWordPressの「Meta Tags」というプラグインのPRのためのもので，このプラグインを使えば同じことをWordPress上でできるというわけです。