週刊Webテク通信

2016年1月第3週号 1位は,4KやRetina 5Kディスプレイ向けにWebサイトをデザインする方法,気になるネタは,「超いいね!」「ひどいね」も可能に,Facebookが新機能「リアクション」を導入

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

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

1. Designing a Website for 4K and Retina 5K Display | JUST™ Creativehttp://justcreative.com/2016/01/14/4k-and-retina-5k-website-design/

4KやRetina 5Kディスプレイ向けにWebサイトをデザインする方法について解説した記事です。

  • 高解像度の技術を理解する
  • イメージにはSVGを使う(写真の場合は,高解像度の画像を別途用意)
  • レスポンシブなフロントエンドフレームワークを使う
  • UIのグラフィック処理やフォント指定にCSSを活用,CSSのメディアクエリを利用する

基本的にはレスポンシブWebデザインの考え方でOKのようですが,スマホだけでなくサイズの大きな高解像度ディスプレイも意識することが必要となってくるようです。

図1 4KやRetina 5Kディスプレイ向けにWebサイトをデザインする方法

図1 4KやRetina 5Kディスプレイ向けにWebサイトをデザインする方法

2. Design Trends 2016 Infographic - Coastal Creativehttp://www.coastalcreative.com/design-trends-2016-infographic/

2016年のWebデザインのトレンドを,インフォグラフィックスにまとめています。

  • フラットデザイン(マテリアルデザイン)
  • バックグラウンド(フルスクリーンビデオ)
  • モバイルアプリ&ソーシャルメディアでの閲覧が増大
  • レスポンシブデザイン
  • テーマに合った正しいタイポグラフィ
  • ミニマリズムの増加
  • ストーリー性
  • カードベースのデザイン

図2 2016年のWebデザインのトレンドのインフォグラフィックス

図2 2016年のWebデザインのトレンドのインフォグラフィックス

3. Why You Can Never Hate These Subtle Transitions On Scrolling Exampleshttp://www.onextrapixel.com/2016/01/16/why-you-can-never-hate-these-subtle-transitions-on-scrolling-examples/

スクロールに合わせた,ちょっとした効果が印象的なサイトのギャラリーです。

一見取るに足らないような些細な効果でも,プロジェクトに命を吹き込む重要な役割を果しているとのことでした。

図3 スクロールに合わせた効果が印象的なサイトのギャラリー

図3 スクロールに合わせた効果が印象的なサイトのギャラリー

4. Designing an iOS App in Sketchhttp://speckyboy.com/2016/01/12/designing-ios-app-sketch/

SketchでiOSアプリをデザインする手順を解説しています。

それほど複雑なデザインではないのですが,非常に丁寧に説明してあり,特にこれからSketchを始めてみようという人には役に立つと思います。

図4 SketchでiOSアプリをデザインする手順

図4 SketchでiOSアプリをデザインする手順

5. Splendid Websites that Greet Users with Hello - Designmodohttp://designmodo.com/websites-greets-hello/

訪問者に「Hello」と挨拶しているWebサイトのギャラリーです。昔のホームページは「Welcome」と書いてあることが多かったですが,最近は「Hello」などと挨拶をするページが少なくないようです。

挨拶は,ユーザーとの強固な関係を構築する上で,信頼や親しみを生むのに重要な役割を果たしているとのことでした。

図5 訪問者に「Hello」と挨拶しているWebサイトのギャラリー

図5 訪問者に「Hello」と挨拶しているWebサイトのギャラリー

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

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

Mockerie.io - Mockup your website or apphttp://mockerie.io/

Mockerieは,いわゆる「ハメコミ合成」写真を作るためのWebサービスです。

スマホ,タブレット,PCの画面に,あなたのサイトやブログの画面などをはめ込むことができます。

通常この手のサービスは静止画をはめ込むだけですが,このサービスではサイトをそのまま動く状態で埋め込むことが可能です。ハメコミされた状態でサイトを閲覧できるのは,なかなか面白いです。

一方で,どういうケースで使用するのかが難しくも感じます。ハメコミされた状態で操作してもらうというより,サイトが更新されても自動的に最新のハメコミ合成写真が生成される点をメリットと考えた方がいいのかもしれません。

図6 操作できる「ハメコミ合成」写真が作れるサービス

図6 操作できる「ハメコミ合成」写真が作れるサービス

図7 「ハメコミ合成」のベースとなる写真を選ぶ画面

図7 「ハメコミ合成」のベースとなる写真を選ぶ画面

今週の気になるWebネタ

「超いいね!」「ひどいね」も可能に,Facebookが新機能「リアクション」を導入 | RBB TODAYhttp://www.rbbtoday.com/article/2016/01/14/138694.html

Facebookの「いいね!」に,リアクション機能が追加され,「超いいね!」「うけるね」「すごいね」「悲しいね」「ひどいね」の5種類が追加されました。ケガをしたとか嫌な目に遭ったという話題の時に「いいね!」とは押しにくいということで,ネガティブな感情に合わせた「悲しいね」「ひどいね」も用意されました。

とはいえ,いちいち選ぶのが面倒だとか,「ひどいね」は投稿内容を否定する意味で使われるんじゃないかなど,この機能は「良くないね!」的な反応の方が多いように見受けられます。

英語だと従来の「Like」に加え,「Love」「Haha」「Wow」「Sad」「Angry」となっており,若干ニュアンスが違っていますね。「日本語(関西)」にすると,「ええやん!」「めっちゃええやん!」「笑たわ」「すごいやん」「悲しいわ」「そら怒るわ」で,通常の日本語版よりもいい感じです。特に「そら怒るわ」は通常の日本語版もこっちにした方が余計なトラブルが減るんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入