新たな一歩 〜サイトリニューアルのお知らせ〜
いつもTplantをご利用いただき、誠にありがとうございます。
すでに多くの方がお気づきかとは思いますが、オリジナルTシャツの制作・プリントを手掛けるTplant（Tプラント）では、よりシンプルに使いやすくをモットーに、Webサイトを完全リニューアルいたしました。
今回のリニューアルで最も重視したのは何と言っても快適性。
快適性に影響する要素は色々ありますが、分かりやすさ、操作性、速度が特に重要だと考えています。
これら全てを向上させること、一言で言うとUI/UXの向上を目指して、
ゼロから設計を見直し、インフラからデザインまでの全てを刷新しました。
UI/UXとは
UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の２つの言葉を合わせてUI/UXと呼びます。
UI/UXはインターネット上のあらゆるサービスにおいて重要です。
UI（ユーザーインターフェース）とは
User Interfaceの略。
Webサイトの場合、ユーザーとサービスの接点となるメニュー、ボタン、フォント、デザイン、画像などがUIに相当します。
UX（ユーザーエクスペリエンス）とは
User Experienceの略で、商品やサービスを利用することで得られる体験を示します。
ECサイトの場合、サイトを訪問してから商品が手元に届くまでの全ての体験がUXになります。
Webページの性能面に関して言えば、表示速度や視覚的な安定性などがUXに直結します。
上記の通り、UIとUXは別の意味になりますが、UIとUXは互いに強く影響し合うものなので、UI/UXとひとまとめにするのが一般的です。
デザイン
Webサイトの見た目や使い勝手の評価については、主観的な部分も大きいため人それぞれで評価が異なって当然ですが、使いやすく見やすいWebサイトのデザインにはいくつかの共通点があります。
多くのユーザーにとって使いやすく見やすいインターフェースの提供を目的として、2014年にGoogleはマテリアルデザイン（Material Design）を発表しました。
参考リンク:Material Design
マテリアルデザインは現実世界の物理法則を取り入れることにより、直感的な操作を可能にしています。
当サイトのデザインも、マテリアルデザインのガイドラインに沿った設計になっています。
速度の向上
言うまでもなく、動きの遅いもっさりしているWebページはストレスを感じます。
速度はUXにとって非常に重要な項目です。
Tプラントのようなオンデマンド印刷サービスは、その性質上、サイトにアクセスしてから注文確定にいたるまでに多くのページを遷移し、多くの操作を行う必要があります。
サイトにアクセスした時の表示速度だけではなく、その後の表示速度や反応速度の向上についても徹底的に追求しました。
当サイトは、初回アクセス時（検索やリンクをクリックしてサイトにアクセスした時）のみサーバー側でレンダリングを行い、それ以降の描画処理はクライアント側（ブラウザ側）で行うアーキテクチャー（SSR+SPA）を導入しています。
これにより、遷移するたびにサーバーからページ全体をロードする必要がなくなり、さくさく動くウェブサイトを実現しています。
試しにどこかクリックしてみてください。
瞬時に次のページが表示されますよね？！
表示速度には通信速度も大きく関わってくるので、満員の通勤電車などではどうしても遅くなってしまうのが現状ですが、少なくとも下り30Mbps程度の通信環境下（平均的な4G回線の速度）では、ストレスなくご利用いただけるような性能を目指して開発に取り組みました。
フォント
フォントや文字サイスも重要です。
文字が読みにくかったり小さすぎたりしたらUXが著しく低下しますよね。
実はフォントについてはかなり苦労しました。
リニューアル後も何度か仕様変更を繰り返し、今の仕様に落ち着いた次第です。
Mac、Windows、iPhone、Android、その他全てのデバイスで同じフォントで表示させるのが理想ですが、そこで日本語の壁にぶつかります。
アルファベットは26文字しかありませんが、日本語の場合、ひらかな・カタカナ・漢字に数字を含むと7000文字以上になってしまいます。
日本語フォントは英文フォントに比べてファイルサイズが桁違いに大きくなるのです。
全てのデバイスでフォントを統一させるためには、アクセス時にフォントもロードさせる必要がありますが、日本語サイトの場合、フォントファイルの容量がネックになります。
フォントをサブセット化（常用漢字以外の漢字など、不要な文字を除外）して容量を大幅に小さくすることは可能ですが、それでも読み込み速度の低下は避けられません。
よって、フォントの統一を一旦断念し、各々のデバイスで最適なフォントで表示させる仕様に落ち着きました。
メニュー配置
優れたアプリケーションは目的の商品やサービスを見つけやすく、ストレスなくサイトの閲覧ができますよね。
迷うことなくご利用いただけるように、メニューの配置や操作性については試行錯誤を重ねました。
情報の表示
技術の進化や通信速度の向上に伴い、商品画像を大きく表示するサイトが増えてきました。
リニューアル前の商品画像は比較的小さい印象が否めなかったため、できる限り大きく表示できるように仕様を変更しました。
オリジナルＴシャツ制作というサービスは、その特性上、一般的なECサイトと比較して非常に多くの情報を掲載することが必要になります。
見やすさとシンプルさはとても大切ですが、思い通りのオリジナルＴシャツを作るために必要な情報を省略してしまっては元も子もありません。
あとになって「こんなつもりじゃなかった・・・」ということは絶対に避けなければなりませんからね。
情報を過不足なく伝える事と見やすさの両立を目指し、新生TplantのUIデザインに取り組みました。
フィードバックをお待ちしています！
今回はユーザーの皆様にご体感いただける部分を中心にお伝えしてまいりましたが、セキュリティ強化やデータの保全性など、目に見えない部分についても大幅に進化しております。
今後も、お客様のご要望にお応えできるよう、皆様の声を大切にし、より良いサービスの提供を目指してまいりますので、ご要望や改善点がありましたら、下記のリンクからお気軽にお知らせください。
今後ともTplantをご愛顧のほど、何卒よろしくお願い申し上げます。
