品質への取り組み

本サイトの目的はウェブをより良くするための技術発信を行うことです。その目的を果たすためには、プラットフォームとしてのウェブサイトが理想的な技術で構築されているべきです。

そこでウェブサイトに対して考えている、私たち運営者の価値観と取り組みを紹介します。

客観性にもとづく指標のクリア

ウェブサイトの善し悪しを判断するのは難しいように思いますが、指標にもとづいて評価するツールが存在します。 主観的な判断や好みだけに頼らず、客観的に望ましい姿であることを目指しています。

Lighthouseのスコア

測定ツールのLighthouseでは、すべての観点(性能、ベストプラクティス、SEO、アクセシビリティー、PWA)で満点となるように努めています。コアウェブバイタルも意識し、性能観点はとくに意識しています。

ユーザーの多様性に応じたユーザーインターフェイスの提供

ユーザーにはさまざまなスタイルでウェブブラウジングをしています。私たちはユーザーの利用環境に可能な限りレスポンシブにありたいと考えています。

ウェブ制作者はスマートフォンやパソコンに対して最適なレイアウトで見られるようにデザインを組むことが多いと思います。それはレスポンシブ・ウェブ・デザインといわれ、ユーザーの画面サイズに応じて、ウェブサイト側が変化することを指します。

レイアウトに限らず、ウェブにはレスポンシブにできるものが他にもあります。ユーザー環境や好みに応じてレスポンシブにするさまざまな取り組みを行っています。

ウェブサイトのモーション有効無効設定

WindowsやmacOS、iOS、AndroidにはアニメーションのON/OFFを設定できる項目があります。

ics.mediaではOSの設定に連動して以下のモーションを無効化しています

  • トップページのヒーロースペースのグラフィカルなモーショングラフィックス
  • 採用サイトの演出
  • 各種UIのCSSアニメーション

当サイトではユーザーインターフェイスの価値最大化のためにインタラクションを大事にしていますが、モーションを不要と感じるユーザーが存在することとその意見も尊重しています。

「ウェブサイトにアニメーションは不要」、「省電力でブラウジングしたい」という方は、OSの設定項目を変更しアクセスください。

  • Windows:[Windowsの設定]→[簡単操作]→[ディスプレイ]→[Windowsにアニメーションを表示する]
  • macOS:[システム環境設定]→[アクセシビリティー]→[ディスプレイ]→[視差効果を減らす]
  • iOS:[設定]→[アクセシビリティー]→[動作]→[視差効果を減らす]

ダークモード対応

WindowsやmacOS、iOS、Androidには配色テーマを設定できる項目があります。ユーザーの好みやニーズの多様性にあわせ、ics.mediaのデザイン配色はライトモードとダークモーを切り替えるようにしています。

OSの設定と連動していますので、必要に応じてご利用ください。

先端技術の積極的導入

ics.mediaの方向性として、新しい技術を紹介することが多いです。世の中に新しいウェブ技術が浸透する足がかりとなるよう、最新技術をウェブサイトへ積極的に導入しています。

  • Jamstack(Nuxtによる静的ジェネレート)
  • 次世代画像フォーマットの導入(WebP画像など)

継続した情報のメンテナンス

時代の流れとともに情報は古くなっていきます。利用環境が変化したり、バージョンの更新により、解説内容のとおりに操作しても同じ結果が得られないといった苦い経験は皆さんにもあると思います。

ics.mediaでは、読者が古い情報に振り回され困らないよう、積極的に記事をメンテナンスするように心がけています。

オープンな情報発信

ウェブサイト改善に対する私たちの取り組みはオープンに発信しています。以下のその一例を紹介します。

また、記事で紹介するデモコードはGitHubにて、オープンソースライセンスとして公開しています。

ics.mediaは年次レポートとしてアクセス数の変化や読者の興味関心を報告しています。

編集部

ICS MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。

この担当の記事一覧