gihyo.jpサイトのロゴ

週刊Webテク通信

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

2019-01-31

ネットで見かけた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　各種ソーシャルメディア向けに画像をリサイズするサービス

おすすめ記事

記事・ニュース一覧