WSOFTDocs へようこそ
WSOFTの新しいサイトであるWSOFTDocsを公開しました。このサイトでは、WSOFTのさまざまな製品に役立つ情報を提供します。
はじめに
WSOFTDocsへようこそ。
もともと、2017年に「あみうは」としてホームページの運営を開始して以来、ほとんどサイトの見やすさや管理のしやすさを考えていませんでした。従来のサイトは、前時代的なデザインで見にくく、アクセシビリティもよくありませんでした。私は長い間、WSOFTのメンバーやクラスメイトに意見をもらい、まとめてきました。その結果、最新のエクスペリエンスを備えたWebサイトを新たに作成することが必要とわかりました。
WSOFTの新たなドキュメントシステムであるWSOFTDocsは、こうした取り組みから生まれました。
主な機能
まず、次にある記事の画像を示します。これを使ってこのサイトの新しい機能をいくつか紹介します。
読みやすさ
WSOFTDocsでは、コンテンツを読みやすくするために、Webサイトのコンテンツの幅を一定にしました。先行の調査によると、長い文章を左から右に目で追うことは難しいため、コンテンツ幅を一定にすると理解度や読む速度が上がることがわかっています。 この効果を実際に体験していただくために、以下に「初めてのAliceScript」という記事の、WSOFTDocsのものとAliceScriptWikiのものを順番に示します。
タイトルとツールバー
どれだけ素晴らしい記事であっても、読みたいと思ってもらえるかどうかは見出しにかかっています。WSOFTDocsの各記事ではタイトルに加えて、簡単ではありますが記事の説明文を追加しました。また、記事の筆者や情報の鮮度をお知らせする日付印、印刷ボタンやナビゲーションボタンも実装しました。
レスポンシブデザイン
旧バージョンのWSOFTのサイトで寄せられたモバイルデバイスでのエクスペリエンス改善についてのご意見を反映するために、レスポンシブデザインを導入しました。ナビゲーションボタンや目次ボタンをクリックすると、デスクトップ表示と同じオプションが展開/折りたたまれて表示されます。
ダークモード
ブルーライトが目を疲労させるかどうかはともかくとして、黒や灰色を基調としたデザインには男心をくすぐるものがあります。WSOFTDocsでは、ダークモードとライトモードを端末の設定にあわせて自動的に適用します。
シンタックスハイライト
コードの例を参照するとき、そのコードがどんなものであるかを簡単に理解するための重要な要素に、シンタックスハイライトがあります。また、それぞれのコードブロックの右上にはコピーボタンを用意しました。これで、そのコードが実際にどのような働きをするのかをコピペで確認できます。
技術記事の公開
WSOFTDocsのすべてのドキュメントはオープンソース化しており、コミュニティのみなさんが自由に記事の編集を提案できるように設計されています。各記事にはペンのマークの編集ボタンがあり、クリックするとGitHubのマークダウン形式のソースファイルへと移動して、コンテンツの修正や改善を求めるPull Requestを簡単に送信できます。詳細については、共同作成ガイドを参照してください。
WSOFTDocsを運営するために開発されたWebサイトプロジェクトである、Lantanaもオープンソースのプロジェクトです。
わかりやすいURL
AliceScriptWikiを利用する際に直面する日頃の悩みの種のひとつに、記事のURLがわかりづらく読みづらいことが挙げられます。同じ記事について、新しいURLの例を次に示します。
サイトのパフォーマンス
サイトが表示されるまでの速度といった基本要素はとても重要です。WSOFTDocsのページロード時間はAliceScriptWikiと比べ最大で300%向上しており、また地域別の配信についてもCloudflareのネットワークを使用することで大幅に改善しました。さらに、クラウド上で100%動作するアーキテクチャも構築しました。
今後について
WSOFTDocsの記事をぜひご覧になって、GitHubへ意見をお寄せください。今後の記事では、各種コンテンツの追加計画や、WSOFTDocsへの移行状況について説明する予定です。
最期までご覧いただき、ありがとうございました。これからもWSOFTDocsを、よりよいサイトへと改善してゆきます。
WSOFTについて