週刊Webテク通信

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

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

ネットで見かけた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 スクリーンショットを簡単に共有できるサービス

今週の気になるWebネタ

ついにiPhoneでSuicaが利用可能に――AppleとJR東日本が協力して生み出したSuicaの新しい姿 (1/3) - ITmedia PC USERhttp://www.itmedia.co.jp/pcuser/articles/1609/08/news170.html

iPhone 7とApple Watch Series 2が発表され,日本独自のFeliCaに対応してSuicaが使えるようになりました。⁠モバイルSuica」とは違う独自開発のもので,ついに日本でスタートするApple PayにSuicaも対応したということのようです。

iPhone 7をタッチさせるだけでSuicaの情報が取り込め,その後カードの方は使えなくなります。他人に勝手に取り込まれないように,記名Suicaに登録してある生年月日や,Suica番号の下4ケタを入力する必要があるそうです。電車の中などで闇雲にタッチさせてSuica情報を抜き取ることは無理そうですね。

なお,Apple PayはECサイトでも使えるという所にも可能性を感じます。初めて利用するECサイトでも,Apple Payに対応していればすんなりと決済まで進めそうです。Apple Payの普及に期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入