週刊Webテク通信

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

ネットで見かけた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

おすすめ記事

記事・ニュース一覧