週刊Webテク通信

2018年11月第3週号 1位は,効果的なレスポンシブサイト/アプリを作る8つのルール,気になるネタは,新型「iPad Pro」はロッカーや冷蔵庫にくっつきます

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

ネットで見かけた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. 一貫性のあるデザイン

図1 効果的なレスポンシブサイト/アプリを作る8つのルール

図1 効果的なレスポンシブサイト/アプリを作る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. クイズやチャットで訪問者と話す

図2 ウェブデザインにソーシャルメディアを統合するユニークな方法

図2 ウェブデザインにソーシャルメディアを統合するユニークな方法

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()」を使って,メインイメージ領域の高さを調整する方法を解説した記事です。

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

図3 CSSの「calc()」を使って領域の高さを調整する方法

図3 CSSの「calc()」を使って領域の高さを調整する方法

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

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

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

図4 ウェブデザインプロセスのチェックリストいろいろ

図4 ウェブデザインプロセスのチェックリストいろいろ

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

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

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

図5 縦横比は守りつつ領域に合わせてサイズが可変するコンテンツ

図5 縦横比は守りつつ領域に合わせてサイズが可変するコンテンツ

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

先週の気になる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上でできるというわけです。

図6 各ソーシャルメディアのプレビューとメタタグの生成/編集ができるサービス

図6 各ソーシャルメディアのプレビューとメタタグの生成/編集ができるサービス

今週の気になるWebネタ

新型「iPad Pro」はロッカーや冷蔵庫にくっつきます! - Engadget 日本版https://japanese.engadget.com/2018/11/07/ipad-protazawano/

ついにiPad Proが出荷され,一般の人のレビューも目にするようになっています。中でもiPad Proをロッカーや冷蔵庫にくっつけた写真や動画はインパクトがありました。

iPad ProにはApple PencilやSmart Keyboardをくっつけるためなどに,102個のマグネットが搭載されています。そのマグネットがかなり強力で,磁気カードなど磁石で異常をきたす恐れのあるものを近づけるのは避けた方がいいようです。

ちなみに,SDカードは磁気の影響を受けそうな印象がありますが,大丈夫とのこと。iPad Proユーザーは,磁気に対して影響のあるものとそうでないものの知識を持っておいた方がよさそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入