週刊Webテク通信

2019年1月第5週号 1位は,ハンバーガーメニューでやりがちなコーディングミスと解決方法,気になるネタは,NetflixのiOS版アプリ、好きな番組を直接「Instagram Stories」で共有可能に

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

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

1. The mistake developers make when coding a hamburger menuhttps://medium.freecodecamp.org/the-mistake-developers-make-when-coding-a-hamburger-menu-f46c7a3ff956

ハンバーガーメニューがスクロールする場合に,やりがちなコーディングのミスとその解決方法を解説した記事です。

iOSのSafariでスクロールするハンバーガーメニューの挙動が今ひとつになってしまう例として,以下の3つを挙げています。

  • 「position: absolute」のメニューはスムーズにスクロールしないし,端まで行ってもバウンスアニメーションがない
  • ハンバーガーメニュー上でスクロールし続けると,下に隠れているメインのコンテンツがスクロールされる
  • 「position:fixed」⁠-webkit-overflow-scrolling: touch」を使った場合,メニューじゃないところを長押ししたあと,メニューがスクロールしなくなる

それぞれ,例として挙げているサイトで,実際にハンバーガーメニューをいじってみると意味がわかるはずです。

これらを解決するHTML&CSS&JavaScriptの例では,メニューが開いている間はメインのコンテンツ部分を「position: fixed」にすることなどで解決しています。

図1 ハンバーガーメニューでやりがちなコーディングミスと解決方法

図1 ハンバーガーメニューでやりがちなコーディングミスと解決方法

2. Free UI Kits, Fonts, Icons and more - UIBundlehttps://uibundle.com/

UIキットやフォント,アイコンなどを探してダウンロードできるサイトです。

アイコン,フォントなどのカテゴリからだけでなく,Sketch,Adobe XD,Photoshop,Illustratorといったアプリケーション別に探せるのが便利です。Figma,Framerといったアプリ名も選べるのですが,まだ項目が0件でした。

図2 UIキットやフォント,アイコンなどを探してダウンロードできるサイト

図2 UIキットやフォント,アイコンなどを探してダウンロードできるサイト

3. 10 Year Challenge: How Popular Websites Have Changedhttps://www.arun.is/blog/10-year-challenge/

「#10yearchallenge」というハッシュタグで10年前と今の自分の写真などをアップするのが英語圏では定番ネタのようで,それのウェブサイト版を作ってみたといったノリの記事です。

Google,YouTube,Amazon,Facebookなどの昔と今とのトップページのキャプチャが並んでいます。ありがちではありますが,最近のウェブデザインの傾向が良くわかって興味深いです。

図3 有名サイトの10年前と今とを比較

図3 有名サイトの10年前と今とを比較

4. The real cost of WordPress | Webflow Bloghttps://webflow.com/blog/the-real-cost-of-wordpress

WordPressのサイト運用にかかる本当の費用についての記事です。WordPress自体は無料ですが,ホスティングにかかる費用はもちろん,ほかにもいろいろ費用がかかりますよという内容です。

Webflowを使ってもらうための比較記事なので,WordPressよりもWebflowの方が最終的にはコストも安く安全ですよという結論に持って行っています。

WordPressにかかる費用としては以下のものがあります。

  1. ホスティング
  2. プラグイン
  3. テーマ

さらに,以下は見えない費用として紹介しているものです。

  1. セキュリティ
  2. WordPress本体とプラグインのアップデート
  3. パフォーマンス

具体的な金額感なども載っており,いろいろと参考になります。

図4 WordPress運用にかかる本当の費用

図4 WordPress運用にかかる本当の費用

5. Blobmakerhttps://www.blobmaker.app/

泡のような形を作ってSVGファイルでダウンロードできるサービスです。

2つのパラメーターをスライダーで調整して,形状を変更できます。色の変更はもちろんできますし,ランダムに形状を変更させることも可能です。

図5 泡のような形を作るツール

図5 泡のような形を作るツール

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

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

Free Image Resizer | Resize Your Images for Social Media | Promohttps://promo.com/tools/image-resizer/

アップロードした画像を各種ソーシャルメディア向けにリサイズするサービスです。画像や動画に簡単に見映え良く文字を入れられるサービス「Promo」が提供しています。

Facebook,Instagram,Twitterなどのための,カバー画像や投稿用画像などを自動で生成します。Googleの広告用画像サイズも各種用意されています。各画像は個別にトリミング位置の変更も可能です。

必要な画像だけチェックしてまとめてダウンロードできるところも気が利いています。Promoと連携して画像からムービーを作れるようにもなっています。

図6 各種ソーシャルメディア向けに画像をリサイズするサービス

図6 各種ソーシャルメディア向けに画像をリサイズするサービス

今週の気になるWebネタ

NetflixのiOS版アプリ,好きな番組を直接「Instagram Stories」で共有可能に - CNET Japanhttps://japan.cnet.com/article/35131645/

NetflixのiOS版アプリから,Instagramのストーリーズに番組や映画の画像を投稿できるようになりました。番組のビジュアルとロゴが入った画像をベースに,従来のストーリーズの機能で文字やスタンプ,投票機能などを追加できます。

ストーリーズと直接連携する機能というのはこれまで見たことなかったので新鮮です。ストーリーからリンクは貼れないので,認知度の高いサービスでしか宣伝効果は望めなそうですね。

若者たちの間では,Instagramのストーリーズをきっかけとしてメッセージでやりとりすることも多いそうです。番組や映画の話題で盛り上がるきっかけにもなる,良い施策だと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入