やっとサークルサイトのデザイン変更が出来た件

ひとまず、自作に取りかかる前にいろいろデザイン作業的なモノを出来る範囲でやっておりますが。

サークル「マドカミ町奇譚」のサイト( http://madokami.fairies.jp/ ) をやっとリニューアルできましたよ。

最初、サークルを立ち上げた時にはもっとハードでダークな作風になるかなあと思っていたのと、有りモノの写真素材で使えそうな画像が、秋葉原ソフマップ建築中のクレーン画像ぐらいしか手元になかったので、真っ黒黒なサイトデザインだったんですが。

まあ、ダークな部分もあるのですが、女の子達が肩を寄せ合って必死にほのぼの生きている感じの作風に結果としてなったので、イメージギャップがあるよなあ的なことをずっと思っていたんですが。

いままでは執筆優先で全然変更作業に着手できなかったので、きょうはちょうど狭間と言うことも有り、4/1のPOP周りと合わせて作業しました。かなりソフトな感じになったはず。

以下は、作業メモ的な。wordpressのテーマ周り(特にTwenty Eleven)がわかってないと意味不明な部分もあるかも。あ、前提として、サイト専用にTwenty Elevenの子テーマとしてCSS等々いじりやすいように分離してある感じで。いままではほとんど変更なしで使ってました。

  1. カラースキームの変更。
    バックグランドを#c6e2f8に変更して、まどかの魔方陣画像を除去。同時に本文部分の透過処理を外した。
    本文分は#dbe8c4に、リンクは#1b8be0(Twenty Elevenのデフォルト)に変更。メニューバーは#e3b3ceに。あと、細かいところをいろいろ調整。
  2. タイトルロゴのグラフィック化
    いろいろ試行錯誤をした結果……。heder.phpをTwenty Elevenからコピーして、テキスト出力ではなく、imgを埋め込む形にしました……。SEO関係ない程度のアクセス数だからあんまり頑張らなくてもいいかなあと。ロゴ画像は透過pngで文字色を#429adfで作成。ロゴのフォントは書籍にも使っている「DFG麗雅宋」のW9。画像サイズは500px×100px。一番大変だったのはimgのみに割り切るまでうまく文字がtransparent処理出来なかったところと、文字の色がしっくりくるのがなかなか見つからなかったこと。
  3. ヘッダ画像変更
    昨日、figmaの巴マミさんのやつを受け取ったので、figma3体を撮影→前処理→水彩風に加工→1000px×228px(Twenty Elevenのヘッダ画像のサイズ)に切り取りをしました。
    前処理は、どうしてもそのままだと不自然になってしまう関節部分の陰影除去、なんですが、まあ後で水彩化加工するからと思ってかなり適当にやっています。技術力も無いと言うのもありますが。水彩化の方法は こちらのサイトを参考に、ぼかしのフェーズを数段実行しています。(ぼかし、最小値フィルター、最大値フィルター→ぼかし等々)

figmaは3体ではありますが、暁美ほむらの制服バージョンを持っていないので、彼女は魔法少女版のヘッドとPSPまどかマギカ付属のまどかボディーのニコイチです。

これ、3人とも視線が合ってないんですよね……。二人は、まどかは振り向き気味にほむらを、マミは隣でほむらを見ているのだけれど、ほむらはどこか遠くを見ているという。一応意味はあるんですけどね。と書いておかないと後付けっぽいからな……。