タイトルの通りWebサイトを作ってみたというお話です。
先にできたもの（まだ中身は作成途中ですが）を出しておくとこんなのになります。
Britannia -Ultima Online Fun Site-
前回の記事で、ウルティマオンラインなるゲームをやってみた話をしましたが、これがまた面白くて。
起動して満足して終わろうと思いましたが、のめり込まないように注意しつつ、ちょくちょくあれからも楽しんでおります。（今もゲームの中で釣りをしながらこの記事を書いています）
で、大変楽しく遊んでいるんですが、前回の記事の記事のブコメやTwitterの反響で
- 昔は楽しかった（今は楽しくないはず）
- やってみたかった（今やろうとは思わない）
といったコメントを散見しまして。（一番スターついてたブコメにあったオーバーロードは見ました！２期欲しいですね。）
今最高に楽しく遊べている僕としては、ちょっともったいないな、と思いました。
僕も昔は良かったという思いの強い懐古厨ですが、さすがは18年も続いてるゲームだけあって、その間にできることは増え、かつバランスも良い感じに調整されています。
で、ここから本題に入るわけですが、この楽しさをシェアできないかなと。
最近Web周りの勉強ではJavaScript界隈の流れの速さについていくのに心が折れ、CSSを勉強したいなと思っていたことも手伝い、Webサイトを作れば良いじゃない！という発想に至ったわけです。
いままでのぼく
「いわゆるBootstrapを使わないと何も出来ない子」でした。
コードを書くのは楽しくて好きなんですが、デザインとなると微妙なものしか作れずできればやりたく無いカテゴリーに分類されます。
そういった時、Bootstrap使うと適当にやってもそれっぽく作れるので重宝していたというか、コレを使わないと何も出来ない子になっていました。
今回のWeb制作のルール
そんな訳で、一念発起してWebサイトを作っていきます。
です。
ブログサービスは用いない
デザインにシステム上の制約を持ち込みたくなかったので、ブログ形式は採択しないことにします。
ただし、すべてHTMLを手打ちするというのも辛いので、今回はSphinxと呼ばれるHTMLジェネレーターを使ってコンテンツを作成していきます。Wordpressも考えたんですが、ほとんどアクセスが無いであろうページ用にサーバーを用意するというのも気が引けまして、静的サイトにすることに決めました。なお、公開にはGithub Pagesを利用しています。
Sphinxについては後ほど詳細を紹介します。
normalize.css以外のcssライブラリは用いない
CSSを学ぶのが主題なので、CSS ライブラリは用いません。しかし、例外としてブラウザがデフォルトで持っている余計なスタイル設定をそぎ落とすnormalize.cssだけは利用します。
いきなりコードを書き始めるのではなく、デザインを事前に考える
どうせなので、デザインを考えてHTMLに落とすまでの過程も一般的な流れに沿おうと思いました。
具体的には、ワイヤーフレームを作ってカンプを作り、HTMLに落とす流れです。
内容とサイトマップを決める
まずは、どの様な内容・サイトマップにするか決めないことには、メニューのデザインが決まらないのはもちろんのこと、全体的なデザインも作ることができません。SIで言うところの要件定義みたいなものですね。
僕はこの作業として、マインドマップを使ってみました。
上はただの備忘メモで、下がサイトマップになっています。
ワイヤーフレームを作成する
決めたサイトマップを元に、どの様なレイアウトにするか考えます。
ワイヤーフレームを作成するにあたって、どんなソフトを使うのが良いかネットで色々と検索してみたところ、「昔はPhotoshopを用いるのが多かったが、最近はSketchというソフトを用いることも増えてきている」とのことだったので、素直にSketchを購入しました。
Sketch - Professional Digital Design for Mac
で、できたワイヤーフレームがこちらです
Sketchの操作方法を説明しているサイトを探し回ったのですが良いのが見つけられず、諦めて作り始めたらあっさりそれっぽいものができちゃいました。Sketchすごい。
デザインを載せる（カンプ作成）
先ほど作ったワイヤーフレームを元に、画像を載せたり内容をそれっぽくしていきます。
ぐっとそれっぽくなりましたね。実際の制作現場であれば、ここで「なんか違う」となればワイヤフレームから作り直しになるのでしょう。恐ろしい。
デザインセンスの無い僕からしたら、割と改心のできと思えたので、今回はこのまま突き進むことにします。
HTML作成
先ほど説明した通り、今回はSphinxというツールを使ってHTMLを吐き出します。
Sphinxにはテンプレート機能があるので、まずテンプレートを用意します。
上記は
テンプレートを作成する — Python製ドキュメンテーションビルダー、Sphinxの日本ユーザ会
に従ってテンプレートを作った直後の画像です。
こちらに対して、まずはnormalize.cssを適用します。すると以下のような感じに
思ったより変わりませんね。
この状態でテンプレートファイルのHTMLをガツガツといじっていきます。
で、出来上がったのが以下の内容です。
Britannia -Ultima Online Fun Site-
レイアウト作っていく上でハマったポイント
色々あるのですが箇条書きで
同じOSでもブラウザによってフォントのレンダリングが変わる
作成中はずっとFirefoxで確認していたのですが、ある程度作ったタイミングでSafariで開くとその文字の太さにびっくり。明朝体で作っていたので視認性が高くなるというよりは野暮ったくなる方が強くて。
こちらは
-webkit-font-smoothing: antialiased;
というオプションを入れることでSafariでも見れる感じになりました。
SVGは文字データも持てる
当たり前といえば当たり前なんですが、SVG画像は文字データも保持できます。
Sketchで画像をSVGに切り出した際は、フォントをアウトライン化していなければ文字データとして保存され、例えばMacで作ってWindowsで表示するなどすると対応するフォントが無いせいで意図しないフォントで表示されてしまいます。
SVGで書き出す前はフォントをアウトライン化しましょう
Safariでtext-shadow 1pxは汚く表示される
text-shadow: 1px 1px 1px #000000;
みたいな設定をSafariで表示したら、ドロップシャドウ部がギザギザでものすごく汚い。2pxにしたところ綺麗に表示されたという問題がありました。
BOX要素を横に並べるのをやめるにはclear: left
これは僕が無知だっただけですが、自前で作ったグリッドシステムを、12分割すべて埋まってない状態で改行する方法がわからず苦労しました。
結論で言うと、rowクラスに
clear: left;
と追加すると、綺麗に次の行に送られました。
参考：Sphinxについて
Pythonで作られたドキュメントビルダーになります。今回はHTMLを作成するのに用いてますが、PDFを作成したりEPUBを作成するのにも使える便利ツールです。
reSTと呼ばれるMarkdownの様なフォーマットのテキストを解釈して、指定の形式に変換してくれるツールです。
markdownと比べて変換前の状態が見易い（しかしその分タイプ数が多くなる）のと、独自に拡張を追加できるのが特徴です。
今回のサイト作成でも、独自にメタ情報を持てる様にして、その情報を元にトップページへの新着記事展開や、各種カテゴリー記事へのサムネイル展開を行っています。
なお、現在のソースは以下に配置されています。
まとめ
今までデザインから逃げていただけあって、割と辛い作業でした。
しかし、一歩一歩手順を踏んでいけば、初めてなりにもそれっぽくできることがわかりました。
サイトマップ作成→ワイヤーフレーム作成→カンプ作成→コーディング
実際のWeb制作現場で取られているフローだと信じていますが、趣味サイトを作る上でも十分有用なんだなと思いました。
こういったフロー知らない状態で、いきなりデザインに気を使ったWebサイトを作れと言われても、何から手をつけていいか困ってしまったと思うので。
まだまだ野暮ったい部分が多いので、もっと色々作って実際に手を動かして、ゆっくりとでもデザインへの拒否反応が消えていけばなと思ってます。
おまけ
ホント今でもウルティマオンライン十分楽しいので、少しでも気になった方は是非無料トライアル試してみてください！
昔やってたという方も、色々と変わった点が多く新たな気持ちで楽しめると思うので是非是非！（ちなみに土地たくさん空いてるので、大きな家が比較的簡単に立ちます！）
最後に再度作ったもの（作ってるもの）へのリンク： Britannia -Ultima Online Fun Site-
