週刊Webテク通信

2019年9月第2週号 1位は, 友達や家族のためにウェブサイトを作るときに役立つ5つのヒント,気になるネタは,日本のHulu,「happyon.jp」から「hulu.jp」に戻る

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

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

1. 5 Tips for Building a Website for Friends or Family | Design Shackhttps://designshack.net/articles/business-articles/tips-for-building-a-website-for-friends-or-family/

友達や家族のためにウェブサイトを作るときに役立つ5つのヒントを紹介しています。

  1. Wixのようなウェブサイトビルダーを使う
  2. 約束しすぎない,関わりすぎない
  3. きちんとした引き継ぎを行う
  4. メールの開設まで面倒見ない
  5. 自分の作品集のひとつに使える機会ととらえる

知り合いに頼まれて,という経験をした人は少なくないと思いますが,なかなか納得できる内容じゃないでしょうか。わたしも5のように,せっかくなので新しいサービスを使ってみる機会にするなど,楽しんでやれる方向に持っていこうとすることが多いです。

図1 友達や家族のためにウェブサイトを作るときに役立つ5つのヒント

図1 友達や家族のためにウェブサイトを作るときに役立つ5つのヒント

2. Cancel vs Close: Design to Distinguish the Differencehttps://www.nngroup.com/articles/cancel-vs-close/

キャンセルとクローズ(閉じる)の違いを区別すべきという主張をもとにした記事です。

「x」ボタンが「キャンセル」「閉じる」かがわからないケースが多く,ユーザーの行った処理が意図に反して無効になるケースを避けるためのヒントを紹介しています。

  • 閉じる前に確認する
  • わかりやすいラベルテキストをつける
  • 閉じるとともに保存する

図2 メールニュースレターのデザインギャラリー

図2 キャンセルとクローズを区別するためのヒント

3. Email Love - Email Inspiration, Templates and Discoveryhttps://emaillove.com/

メールによるニュースレターのデザインギャラリーです。モバイルサイズに切り替えたり,HTMLコードを見たりできます。

メール関係のデザインリファレンスや新たなニュースレターを探すのに役立つリスト,HTMLテンプレートなども提供しています。

図3 メールニュースレターのデザインギャラリー

図3 メールニュースレターのデザインギャラリー

4. 20 Graphic Design Websites You Will Be Inspired Fromhttps://line25.com/inspiration/graphic-design-websites

グラフィックデザインが参考になるウェブデザインを紹介しています。

最初の解説文で「世界はデジタルからデザインの世界に移行している」⁠形,形状,構造,言葉,アイデア,思考といった我々の周りのすべてのコンテンツはデザインを必要とするだろう」と,デザインの重要性を語っていました。

図4 グラフィックデザインが参考になるウェブデザインいろいろ

図4 グラフィックデザインが参考になるウェブデザインいろいろ

5. Recreating Netlify's Neat-o Sliding Button Effect | CSS-Trickshttps://css-tricks.com/recreating-netlifys-neat-o-sliding-button-effect/

ロールオーバーすると,横に大きくなってラベルテキストも増えるボタンのコーディング例です。

アイコンと「ダウンロード」というラベルテキストにマイナスの値を設定することで非表示にし,ボタン全体がホバーされたときにそれらを正の値にリセットしています。

しかし,そのままだとホバー時に「ダウンロード」というラベルテキストがボタンの外に表示されてしまうので,transform: scale(1, 1)を追加するなど,いろいろなテクニックを使っていました。

図5 ロールオーバーすると表示内容が増えるボタンのコーディング例

図5 ロールオーバーすると表示内容が増えるボタンのコーディング例

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

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

CodyHouse Pro | CodyHousehttps://codyhouse.co/codyhouse-pro

今回は,Webサービスではありませんが,ウェブ制作のためのフレームワークを紹介します。以前紹介したCodyHouse Framework 2.0に,追加のコンポーネントが使えるなど強化された有料版のCodyHouse Proです。

110の無料版コンポーネントと42のプロ版コンポーネントが使えます。使用するコンポーネントごとに必要なCSSとJavaScriptを追加していくので軽量です。既存のCSSに影響を与えず追加していけるように考えられています。

その分,全部入りのフレームワークに比べて使い方が難しい面もありますが,CodyHouse Proのページに埋め込まれている紹介動画を見ると,どう作業していくかがわかると思います。 料金はサブスクリプション制で年89ドルです。

図6 コンポーネントベースのフレームワークCodyHouse Pro

図6 コンポーネントベースのフレームワークCodyHouse Pro

今週の気になるWebネタ

日本のHulu,「happyon.jp」から「hulu.jp」に戻る - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/1909/06/news091.html

日本のHuluのドメイン名が「happyon.jp」から「hulu.jp」に戻りました。約2年4カ月ぶりに,サービス名と同一のドメインに戻ったとのことです。

「ユーザーの視聴環境に影響なくドメイン変更できると検証できたため」とのことで,ドメインを戻すことはずっと検討していたそうです。今,happyon.jpにアクセスすると,hulu.jpにリダイレクトされますね。

では,なぜ以前のリニューアルの際に「happyon.jp」に変えてしまったのかですが,当時も明確な説明はなく,いろいろな憶測を生んでいました。ともかく,ドメインが戻ったということで,米Huluとの関係もこれまで通りで,サービス名が変わることもなさそうです。

著者プロフィール

芦之由(あしのよし)

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

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

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