ウエブサイト

モバイルフレンドリーには、レスポンスデザインだけではなく、ページスピード、画像の軽量化、ユーザーからの情報取得時の対応速度など、モバイルだからこそ意識すべき課題が沢山あります。

UX（ユーザーエクスペリエンス）は、ユーザーが、サイトを利用し得られるの体験です。コンテンツの価値だけではなく、一貫した使いやすさ、目的のコンテンツに素早く到達できる機能、安心して使える事など多くの要素が含まれます。

ホスティングを活用する事で、安全性やページスピードの向上がはかれます。一般的にホスティング管理は、専門知識も必要で、それなりに労力が必要となる業務です。当社のやり方は、少しでも管理コストの削減し、安心にWeb配信できる環境を追求した結果、今の環境となりました。一般企業でも必ず役立つ情報を考え公開します。

リニューアルサイトでは、良質のコンテンツを配信します。UXの観点からも、ユーザーに役立つ情報こそユーザー体験に不可欠だからです。CMSの活用など当社の経験を画像も使い、解りやすく試してみたくなる内容となるよう心がけたいと思います。また、情報の多くは日々進化しますので、最新情報も追記として、加筆・修正を時系列で解りやすく発信していく予定です。

PC用もモバイル用も同一コンテンツを配信し、画面サイズにも柔軟に対応できるレスポンシブデザインなウェブサイトを公開する必要があります。独自のCSSをメディアクエリを利用し公開できますが、当社でにBootstrap5を利用し、サイト全体のデザインやモーダルウインドウやコラップスの利用でユーザーの利便性にも配慮できるレスポンシブルなサイトを公開します。

Googleが重要視するページスピードは、モバイル対応する上でとても大切な要件です。Webp等次世代画像フォーマットを活用し、ホスティングでは、nginxによるリバースプロキシサーバーでgzip圧縮配信を行う。HTTP2やHTTP3（当社環境では、ホスティング企業の都合でUDP443ポート通信がの制限されている）による高速化も実装し、モバイルでも快適に利用できるページ速度を追求します。

モバイル対応では、ブレイクポイント（画面サイズの変更点）で、レスポンシブルにフォントサイズを変更できることも重要です。Bootstrap5では、デフォルトでレスポンシブフォントサイズが有効になっています。活用すべき機能の一つです。

サイト内のページ遷移に重要な役割をもつメニューは、サイト内の主要ページへのリンクを解りやすく遷移できる構造を持たせる。現在のページと関連コンテンツへのナビゲーションもサイドバーから遷移できる仕組みを持たせる。パンくずリンクを活用し、現在のページと上位へのリンクを持たせる。ページ内のセクションごとのリンクは、ページ内コンテンツの内容を解りやすくナビゲーションできるので提供する。

モバイルフレンドリー、モバイルファーストで全てのデバイスでで一貫したコンテンツを提供する。デバイスのサイズに応じ、ナビゲーションの表示を切替操作で可能にし、コンテンツ全てを全デバイスで提供する。

読みやすいフォントとサイズを意識し、画像は、見やすいレイアウトで次世代フォーマットで高品質で軽量の素材を使用する。見出しと補助見出し適切に用い、詳細説明文を読みやすくする。

ユーザーがアクションを起こすボタンには、一貫したデザインによる明確なアクションボタンを用いる。重要なアクションやページ移動のリンクも同様に、一貫したデザインによるボタンを用いユーザー

サイト内のお問合せフォームは、サイト問い合わせページだけではなく、目的別の専用フォームや、記事に対するお問合せフォームなど、ユーザーがどの場所からメールフォームを送信したかを分かる仕組みを持たせ、フォームの設置場所に応じ、必要最小限の登録情報を要求する仕組みを実装する。

ページの読込み速度の向上に必要なホスティング環境を最適化し、圧縮ファイル形式で安全で高速な配信を行う。スタティック要素のコンテンツファイルはキャッシュを利用し、より高速配信できるよう環境を整える。

コンテンツページデザインは、カテゴリ、コンテンツページで統一されたデザインで公開し、インタラクションの一貫性の為、ページ内のボタンやリンクは、理解しやすい動作のデザインで公開する。

コンテンツの配信は、HTTPSでzgip暗号ファイルで配信する事で安全性と速度を確保し、フォームか送信されるユーザー情報も適切に保護した運用環境で管理する。

VPS（Virtual Private Server）は、ヴァーチャル プライベート サーバーをさし、低価格で専用Webサーバー環境を利用できるホスティングサービスです。メール環境や、データベースも仮想マシンとして独立して稼働できます。またマルチドメインや、サブドメインを利用でき、ドメインごとに独自の環境に設定できるので、WebAPIサービスも一つの契約で提供できます。

管理ツールにPleskを利用することで、サーバーシステムのアップデートが利用でき、比較的安全な状態を維持できるのがエンドユーザーにとってホスティング環境の管理工数を軽減できる利便性の高いツールです。HTTPSに必要な証明書（企業認証は出来ない）や、不審なアクセスをチェックしIPアドレス遮断するfail2banなど、多くの機能を提供してくれます。

Apacheに代表される、Webアプリ用PHPに言語と高度に連携したサーバーがあります。一方nginxは、リバースプロキシサーバーとして、リクエストに応じた、バックエンドサービスに橋渡しをするサーバーが有ります。Nginxは、HTMLなどのスタティックなファイルならnginxが単独で、zgip圧縮し、応答処理を行ってくれます。また、ポート別にバックエンドサービスを切り替えるリバースプロキシ機能を利用しWebAPIサービスを公開できます。

Pleskの機能は多岐にわたり、ウェブホスティング、メール機能（アンチウイルス、スパムフィルタ）など基本的なホスティング環境の管理から、データベースの作成・管理・削除、アプリケーションや言語の導入など膨大な機能を管理導入することができます。各種サービスの設定や、ログ管理もできる優れものです。

LinuxOSのサーポート体制の変更など、オープンソース環境で提供されるOSには、必ず移転を伴う時期がきます。そんな際、Plesk環境であれば、サイトの引っ越しもGUIで実行できるツールも標準で備わっていますので、エンドユーザーでもホスティング管理が可能になります。

当社では、CMS（Contents Management System：コンテンツ管理システム）にMovable Typeを利用します。

公開ファイルをスタティック（静的）ファイルで公開でき、ページスピードにも最適だからです。また、DataAPI機能を活用し、コンテンツ管理を独自のシステム化する事でコンテンツの管理工数の削減につながります。当社では、コンテンツベースをExcelファイルで作成管理し、Excel内の画像と文章を一つのワークシートで管理しMovable TypeのDataAPI経由で投稿しています。

良質のコンテンツを公開するためには、ナビゲーションでのリンク切れや、HTMLの構文のチェックなどCMSの利用が不可欠な時代、コンテンツのインハウス化にも役立ちトータルコストを軽減できるメリットがあります。

Bootstrapには、さまざまなコンポーネントが用意されています。デザインの統一性のため、リスト、フォーム、ボタンに利用する事で見やすく解りやすい表現が可能になります。見出しや文節の文字サイズは、標準でサイズが振り分けられ、レスポンシブルに対応しサイズの変動も自動で行えます。

UXを意識したページ作りにはとても役立つ機能を持った優れものです。しかし、CSSもJSも大きなサイズの為、ページスピードの阻害要素となりますが、ホスティングを最適に利用し、gzip圧縮ファイルで配信する事で、十分なページ速度を確保できます。

画像フォーマットは、次世代フォーマットのwebpで生成し公開します。画質も良くファイルサイズは小さい次世代画像により、ページスピードとコンテンツの質を課題解決になります。

当社のExcelコンテンツ管理ツールは、コンテンツ取得時、Excelに配置した画像をwebpフォーマットに変換し、サイト用画像に利用するため、画像の変換処理なども不要で、Movable Typeの記事投稿時に、ページ内画像は全て記事関連画像として１トランザクションで投稿されます。

Bootstrap５には、レスポンシブルに対応したフォントが利用できます。モバイルフレンドリーはページ作りで大きな力を発揮します。基本となるページに見出しタグ、文節たぐのフォントを確認し、サイト全体の基本デザインを確定する事で、ページ毎のデザインの統一性と、レスポンシブルへの対応も確定できるので作業工数を抑えるためには最適です。

当社では、ページ単位のナヴィゲーションとして、全ての記事ページにページ内リンクを設置します。ページ内の目次として活用して頂け、ユーザーにコンテンツの内容を解りやすく、有効に活用して頂くための機能で、最近は多くのサイトで用いられています。

ページ内リンクを実際に手作業で組み込む際、大変労力が必要となりますが、当社のコンテンツは、自社システムとMovable TypeのDataAPIを連携させたコンテンツ管理体制で運用しているので、Excelからコンテンツを取得する時点で、見出しタグのID属性を取得し、自動でページ内リンク用のコンテンツを生成しています。整合性の向上と工数削減がはかれ、リンク切れ等のエラーが生じない仕組みでコンテンツ生成します。

当社は、HTMLの構文が文法に則って公開されることを重要視しています。ブラウザーの機能が向上し多少の構文にミスが有っても表示してくれます。しかし、オンラインプレゼンスの強化を目的としたページは、情報も多く、HTMLの多様なタグを用い画像や文字も増えがちです。SEO対策以前に、HTMLの構文をしっかりチェックし公開する事で、検索エンジンにも確実に読み込んでもらえる可能性が向上します。そのために、HTMLの構文は正しい記述方法で作成し、公開していきます。

しかし、オンラインプレゼンスの強化を目的としたページは、情報も多く、HTMLの多様なタグを用い画像や文字も増えがちです。

SEO対策以前に、HTMLの構文をしっかりチェックし公開する事で、検索エンジンにも確実に読み込んでもらえる可能性が向上します。そのために、HTMLの構文は正しい記述方法で作成し、公開していきます。

構造化データはセマンティックWebとして、Webの利便性向上を目的に、サイト内のデータを検索エンジンが理解出来るように構造化し、検索エンジンが適切に情報を扱うための機能です。

構造化データは、JSON-LDだけではなく、Microdataや、Movable Typeのカスタムフィールドとテンプレートを活用すれば、検索エンジンが情報を取得してくれます。

当社では、JSON-LD形式のデータをページ内に埋め込む方式を使い、構造化データを配信しています。