WFSデザイン仕様書

まえがき

当サイトWorld Financial Strategy(以下WFS)は、本格的に勉強を始めた私にとって処女作というべき、オリジナルデザインのブログです。

その道のプロの方がご覧になると、いろいろとボロが出てくるかもしれませんが、私としては概ね当初のイメージ通りのものが出来上がり、デザインにも満足できています。

私は自己表現の場として、いつかオリジナルデザインのブログを作りたいと思っていました。

思い立ったのが2015年5月末ですが、当時の私のスキルはHTMLとCSSが多少分かる程度で、Web作成の上で避けて通れないJavaScriptやPHPなどの知識は皆無でした。

まずは仕事帰りにスクールに通って勉強をしようと考え、ヒューマンアカデミーの銀座校に向かい、話を聞きに行きました。

当時の私は必要な言語をいろいろ学んで30万くらいかなー、と軽く考えていました。

確かにそれくらいのコースもありましたが…、種々の言語をひととおり勉強しようとすると、『Webデザイン&実践プログラミング講座』という講座の『マスターコース(独立開業対応)』となり、何と費用は2年間オンデマンド受講し放題ではあるものの80万円！

いやはや驚きました。予算大幅オーバー。

しばらく頭を抱え込みましたが、結局私はその場でサインしました。

思い切って自分への投資と思って貯金を注ぎ込み、ヒューマンアカデミーに通うことを決意しました。

ここでは、こうして作られたデザイン・UI/UXの細部の設計仕様を記述していきます。

これから私と同じくオリジナルテーマのブログを作る方には何らかの参考になるでしょうし、私自身の備忘録的要素は強いのですが、お時間のある方はお楽しみください。

設計・デザインコンセプト

イメージ

WFSは、数学を用いた投資理論の展開を中心として、個人の資産運用や節約術、さらには人生を楽しむための娯楽など、幅広いコンテンツを取り扱うウェブサイトです。
未来を予知するかのごとき投資理論をイメージするため、デザインは近未来感・浮遊感をイメージして設計しました。
全体的に曲線を多用し、配色は青色と銀色(滑らかな金属の質感)を中心として透明感あるデザインに仕上げつつ、主体となる本文の可読性やユーザビリティにも配慮しました。

モデル

未来予知をテーマに組むデザインということで、カードゲーム《マジック:ザ・ギャザリング/Magic: The Gathering》のカードセットのひとつで、《時のらせんブロック/Time Spiral Block》の第3拡張パックの《未来予知(フューチャー・サイト)/Future Sight》のタイムシフト枠のデザインをモデルにしました。

未来予知タイムシフト枠デザインの一例

《幽霊火/Ghostfire》

具体的なデザイン

メインの骨格となる金属フレーム

WFSサイト内のページ共通の骨格となるフレームです。
具体的には皆様も既にご覧になっている以下の部分です。

言うまでもなくWFSの各パーツ、コンテンツを収納するメインとなる骨格です。

コンテンツイメージのフォトフレーム

コンテンツイメージも無骨な長方形ではなく、傾いた楕円形のフォトフレームに収まるようにくり抜きました。

傾きは本家のMTGカードでは右肩下がりになっていますが、このサイトは投資理論を展開しようとしているサイトなので、投資の成績も右肩上がりにならなければならないということで、右肩上がりに角度20°の傾きをつけました。

フォトフレームを用意したら、あとはイメージ画像を単純にPhotoshopで楕円形にクリッピングマスクして画像を得ておしまい…となるところですが、ここでは近未来感を出すために、楕円形のフォトフレームに沿って動く光を描写させます。

さて、光を描写するためには、傾いた楕円に沿って動く点の軌跡を数式で表現する必要があります。

楕円は次式で表せます。

\[
\frac{x^2}{a^2} + \frac{y^2}{b^2}=1
\]

ですが、この方程式を使って動点を記述する方法は少なくとも私には浮かびません。
そこで動点を媒介変数\(\theta\)を用いて、時間の経過とともに中心からの角度が変えることで動点を動かしていきます。

すなわち、楕円の方程式を極座標形式にすると次式のとおりです。

\[
\begin{align}
\ x& =a\cos\theta \\
\ y& =b\sin\theta \\
\end{align}
\]

しかし、こうして得られた極座標形式の方程式だけでは不十分です。

なぜなら、楕円は先述のとおり20°傾いているため、楕円の方程式も原点を中心に回転させなければいけません。

点\((x, y)\)を角度\(\phi\)だけを回転させて\((x’, y’)\)に移動させる操作は、行列を用いて次のように書くことができます。

\[
\left(
\begin{array}{c}
\ x’ \\
\ y’ \\
\end{array}
\right)=
\left(
\begin{matrix}
\cos\phi & -\sin\phi \\
\sin\phi & \cos\phi \\
\end{matrix}
\right)
\left(
\begin{array}{c}
\ x \\
\ y \\
\end{array}
\right)
\]