週刊Webテク通信

2016年9月第3週号1位は、Webサイトのサイドバーに生成させるコンテンツについて、気になるネタは、ついにiPhoneでSuicaが利用可能に

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

1. The Interactivity Benefits & Design Trends of Dynamic Sidebar Content - Envatohttps://envato.com/blog/design-trends-dynamic-sidebar-content/

Webサイトのサイドバーに生成させるコンテンツとして、どういったものが有効かを事例とともにまとめています。

  • ソーシャル機能
  • レビュー評価
  • 最近投稿された記事リスト
  • 動的に生成されるコンテンツ
  • スクロール時に固定されたスライディングボックス
  • イベントスケジュール
  • 関連するコンテンツ
図1 Webサイトのサイドバーに生成させるコンテンツについて
図1 Webサイトのサイドバーに生成させるコンテンツについて

2. Why Designers and Web Developers Must Work Together - Designmodohttp://designmodo.com/designers-developers-work/

なぜデザイナーとWebデベロッパーが一緒に作業をするべきかについてまとめた記事です。

一緒に作業することによる良い点と悪い点、デザイナーのための5つのヒント&デベロッパーのための5つのヒント、デザイナーとデベロッパーみんなが知っておきべき基本知識などを紹介しています。

図2 デザイナーとWebデベロッパーが一緒に作業をするべき理由
図2 デザイナーとWebデベロッパーが一緒に作業をするべき理由

3. Building Resizeable Components with Relative CSS Units | CSS-Trickshttps://css-tricks.com/building-resizeable-components-relative-css-units/

CSSの相対的な単位を使って、リサイズできる要素を作る方法を解説しています。

文字、ボタン、アイコン、画像のキャプションなど、親要素の文字サイズに合わせて相対的にサイズが変わる事例が数多く掲載されていて参考になります。

図3 CSSで相対的にサイズが変わる要素の実例と解説
図3 CSSで相対的にサイズが変わる要素の実例と解説

4. 14 Useful Tools & Websites for Designers | Design Shachttps://designshack.net/articles/business-articles/14-useful-tools-websites-for-designers/

デザイナーに役立つオンラインツールとサイトをまとめています。

プレゼンテーション&インフォグラフィックス作成ツール、ワイヤーフレーム作成ツール、チームでのタスク管理ツール、WordPressで表やグラフを作成するツールなどが紹介されていました。

図4 デザイナーのためのツールとサイトいろいろ
図4 デザイナーのためのツールとサイトいろいろ

5. The Beauty of Ultra-Minimal Web Design - Speckyboy Design Magazinehttps://speckyboy.com/beauty-ultra-minimal-web-design/

非常にミニマルで美しいWebデザインのギャラリーです。

シンプルながらも、アニメーション効果、スクロールによる効果などが加わったサイトが多く、参考になります。

図5 非常にミニマルなWebデザインのギャラリー
図5 非常にミニマルなWebデザインのギャラリー

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

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

Snaggy - easy screenshotshttps://snag.gy/

Snaggyはスクリーンショットを簡単にオンラインで共有できるサービスです。スクリーンショットはOSの機能で撮り、Snaggyのページ上でペーストするだけで共有用ページが生成されます。

画像はトリミングしたり、鉛筆ツールでの書き込みや文字入力もできます。文字や線は色や大きさ(太さ)も変えられますが、あとから編集はできません。その代わり、Undo(取り消す)/Redo(やり直す)機能があります。

ログイン不要で画像をペーストするだけで簡単に共有できるので、Webサービスにあまり慣れていない人に使ってもらうのにも良さそうです。なお、iPhoneでは画像編集はできませんが、画像の閲覧は問題なくできました。

図6 スクリーンショットを簡単に共有できるサービス
図6 スクリーンショットを簡単に共有できるサービス

おすすめ記事

記事・ニュース一覧