2023-09-07
#WEB #2023年09月

今週の気になったWEB系ニュース【2023年36週目】

目次

すみっこでつながろうプロジェクト ‒ サンエックス アーマード・コア６ オフィシャルサイト サイトに使われている言語やフレームワークがわかる拡張機能 アクセシビリティを意識したマークアップ さいごに

週に1回気になったWEBサイトやコーディングの情報をまとめています。

今週は4つお届けします 💞

すみっこでつながろうプロジェクト ‒ サンエックス

すみっこでつながろうプロジェクト ‒ サンエックス
ぎゅぎゅっと!すみっコぐらし。10周年の“ありがとう”をつめこみました。みなさん、どうぞお楽しみに。
title
https://www.sumikkogurashi-10th-project.jp
title
image block
PCのFV。コンテンツがゆっくり上に上がって下からふわっと新たなコンテンツが表示される。
image block
すみっコたちをホバーorタップすると動いてくれる。たまにキャラクターが画面を横切ってかわいい。
image block
流れていくコンテンツを逃してしまうときは画面右のメニューからもゆっくり見ることができる。左から順にポンポンでるアニメーションがかわいい。
image block
SPのFV。横幅を変えても自然なレイアウト。
image block
SPメニューは横長のボタンになっている。背景の画像をpictureタグで切り替えて中のテキストはCSSを変える形のよう。

今年10周年を迎えるサンエックスの人気キャラクター「すみっコぐらし」の特設サイトです。

1ページに関連ページのリンクを集約したサイトで、ホバーしたときの動きやアニメーションが丁寧でとてもかわいいです。

image block
image block
そらのおばけのナイトパーク in TOKYO SKYTREE® ‒ サンエックス
すみっコぐらし10周年記念イベント「そらのおばけのナイトパーク in TOKYO SKYTREE®」を開催！すみっこでつながろうプロジェクトの一環で、10周年同士の「すみっコぐらし」と「東京スカイツリー」が初めてコラボレーションします。
title
https://www.sumikkogurashi-10th-project.jp
title

ほかのリンク先を見てたら気になるものがありました。

東京スカイツリーとすみっコのコラボイベントみたいです。田舎にはないコラボカフェってやつだ…。ちょうど来月東京に行く予定なので、迷子にならなかったら食べに行きたいです。

アーマード・コア６ オフィシャルサイト

image block
PCのFV。ふわっ→シュッ→ふわっとテキストとロゴが表示される。
image block
画像はwebpにも対応。かなり細かく出し分けされている。
image block
動画をホバーすると中心の丸の境界線が時計回りに塗りつぶされて画像が拡大される。
image block
ページ表示時、左上の/CONCEPTの見出しが文字化けのようにガチャガチャ動いてかっこいい。
image block
SPのFV。画面下にはスクロールを促す矢印。
image block
ヘッダーとメインコンテンツの境目のほのかな光がかっこいい。
ARMORED CORE VI OFFICIAL SITE | アーマード・コア６ オフィシャルサイト
メカアクションゲーム「アーマード・コア」シリーズの公式サイト。シリーズ最新作『ARMORED CORE VI FIRES OF RUBICON』が遂に登場。パーツを組み替えて自分だけのオリジナルメカを操り、立体的で緩急あるステージを三次元機動で自由に駆け巡る。射撃と近接戦闘を駆使したメカならではのダイナミックな動きで難局に挑むアクションゲームです。
title
https://www.armoredcore.net
title

メカアクションゲーム「アーマード・コア」シリーズの公式サイトです。

あまりこういったメカ系のゲームはしないのですが、TLで流れてきて気になったので覗いてみました。

トンマナ的に明るい色が使えないサイトのデザインの参考になりそうです。

真っ黒のところとグレーの背景に柄を敷いてところどころソフトライトとかで明るくさせるのが王道かも。視認性と戦いながら暗くてかっこいいサイトつくるのは大変だ 😵

サイトに使われている言語やフレームワークがわかる拡張機能

image block

wappalyzerというChromeの拡張機能です。ツイッターで流れてきて気になり導入してみました。

試しにこのサイトを開いて実行してみたらほんとにでてきた！当たってる気がします。

image block
About ｜BLUE HAMHAM Official
アニメーター有村泰志のキャラクター、「ブルーハムハム」をご紹介します。 Introducing BLUE HAMHAM, an original character by animator Taishi Arimura.
title
https://bluehamham.com
title

作りが謎なサイトでも試したらワードプレスと出たけど本当！？

ワードプレスでここまでのアニメーションがんがんでレイアウトも凝ったサイトつくれるんでしょうか。すごすぎる…。

アクセシビリティを意識したマークアップ

アクセシビリティを意識したサイトを作る上で大切なこと
mosyaはオンラインでHTML,CSS,JavaScriptを基本からしっかり学習できるサービスです。環境構築不要でその場でコーディング学習可能です。現役エンジニアが作ったカリキュラムに沿って学習を進めましょう。
title
https://mosya.dev
title

horomiさんにmosyaのページをおすすめしてもらいました！

まさに知りたかった情報でこれから実践して行きたいです。horomiさんありがとうございます 😭 🙏

画像には alt 属性をつける
role属性やaria属性を使って、要素の意味を明確にする

role属性やaria属性は存在は知っていたものの、つけたことがなかったので勉強になりました。

Webアクセシビリティが向上する！HTMLのrole属性の使い方を解説 - WEBCAMP MEDIA
皆さんは「Webアクセシビリティ」という言葉ご存知でしょうか？ 街中で点字やスロープなど、障碍者や高齢者に優しい設備を見かけたことはあるでしょう。 そのようなユニバーサルデザインや、バリアフリーのよう…
title
https://web-camp.io
title

↑読んだ感じ 汎用的に使えるdivタグでつくるとどんな役割のパーツかわからないからrole属性つけるらしい。

navタグとかul liタグとかはタグ自体にナビとかリストとかの意味合いがあるから使わなくてもいいみたい。

search、banner、alertあたりは使っていきたいなと思いました。

アクセシビリティを考慮したHTMLコーディングガイド
title
https://zenn.dev
title

↑altの設定はこちらが参考になりました。

装飾のための画像はあえてalt属性をつけて中身を空にすることで、読み上げを飛ばせるそうです。

さいごに

今週は

  • すみっコぐらしの10周年サイト
  • アーマードコア6の公式サイト
  • サイトに使われている言語やフレームワークがわかる拡張機能
  • アクセシビリティを意識したマークアップ

の4点でした。

可愛いサイトとかっこいいサイトと来たら来週はおしゃれなサイトかな。

また良さげなサイトを漁ります～！

#WEB #2023年09月