ブログリニューアルの過程を紹介してみる

こんにちは〜

九州がすごく心配ですが、私は相変わらずですごめんなさい。

ブログをリニューアルしたのでその過程を紹介したいと思います。

まずはノートにざくざくと

ざくざく書いていきます。

なんとなくのイメージを作っていきます。

結構雑です。。。色々アイディアを出しながらどんどん書いていきます。

ページ構成とかも適当に書いておきました。

アンケートもそのうち実装したいなぁ・・・と思いながら一応含めている(笑)

スマホサイトのデザインも今回はちゃんと考えました！！！！えらい！(？)

Illustratorで枠を作成する

ワイヤーフレームっていうんですかね。なんかそんな立派なものでもないんですけど。

だいたいこんな感じ〜〜ですごい雑に配置してみました。

ワイヤーフレームの作り方はなんかよくわからないです。

枠をPhotoshopに移動して大体の雰囲気をつかむ

本当に私の独自のやり方だと思うんですけど、先ほどの枠をそのままPhotoshopに持っていき、その上からペンタブを使ってラフを描いていくような感じで大体のイメージを決めます。

途中の画像なので完成と比べて色が異なりますが、色とかをこの段階で調整して全体の雰囲気を決めています。

Illustratorで素材を作成していく

大体のイメージが決まったので、実際に先ほどの枠上にIllustratorで素材を作成していきます。

あっちこっち行ってますが、複雑なイラスト等をIllustratorで作る技術がないせいです。。。

そして四角形などを使う場合はIllustratorのが扱いやすいためです。

枠上(別レイヤー)に素材をそのまま作っていき、素材を作成したらコピーして新規ファイルにペーストしてアートボードを素材に合わせて保存・・・を繰り返して作成していきました。

大体こんな感じのができました。

右上の子はPhotoshopで描いてますよ〜〜

これでトップページのデザインが終わりました。この後Webデザイン紹介ページの素材もちょろっと作ってコーディングに移りました。

(この辺が相変わらずダメポイントだとは思っています。。。以前よりは丁寧に作ったとは思うんですけど、まだまだだめですねぇ。。。そしてトップページしか作ってないあたり・・・・うん)

コーディング作業

やったぜ！大好きな(?)コーディング作業です。

正直Swiftのが楽しいナーと思いながら気付いたら数時間没頭してたり・・・・

最初はhtmlとcssのみで作成していき、その後jQueryでちょろっと動かしたりしてます。

この時点で

・トップページ

・webサイト紹介ページ

・疑問解決コーナーのページ

・シングルページ

・アーカイブページ

を作成しました。

もうほとんど今と同じですね！やったー！

ここでタイトルがおりブロからうるおいらんどに変わっています(笑)

フォントを変更する

今回初の試みが(初なのがおかしいんですけど)

ちゃんとフォントの設定をしてみました！！！！！

それまでフォントなんて変えたこともなく、safariで明朝体でfirefoxではゴシック体でも何も気にすることなくそのままでした・・・・・なんとことだ。

通常の文字は流行りらしい「游ゴシック」、見出しやタイトルは「コーポレート・ロゴ」を使用しています。

大分印象が変わるなーと使ってみて初めて感じました。

コーポレート・ロゴを使用する際はこちらを参考にさせていただきました。日本語webフォントを使用する際にちょっと軽量化できるやつ。

日本語Webフォントをサブセット化して軽量化する方法

友達のブログを読んで気になっていたのは言うまでもない・・・(笑)

日本語ウェブフォント「Noto Sans」を使ってみた。 | LOL.blog

wordpressに移行する

ローカルからサーバー上にあげていきます。

非公開の練習用サイトでとりあえず作っていきます。

おもにhtml→html + phpに置き換える作業をしていきます。

いくつかのモジュールに分けてファイルを作っていくので、わんさかファイルが出来ていきます。過去最高のファイル数です。笑

スマホ用の子テーマを作成する

今回ある程度はレスポンシブでいけるようにはしてあるんですが、それでもタブレットまでぐらいが許容範囲かなといった感じなのでスマホ用の子テーマを作成しました。

切り替えはプラグインで「Multi Device Switcher」を使用しています。

調整はもちろん実機も見ながらやっているんですが、Firefoxの「Default User Agent」やXcodeのシミュレーターを使用しています。

ちなみに普段からサイト制作時はFirefoxで作業しています。おかしいなーってことがあったら「Firebug」でコードを見ながら制作しています。

スマホサイトも同様にあれ？ってなった時にコードを見る時にFirebugを用いています。

でもオススメはやっぱり「XcodeのiPhoneシミュレーター」です(笑)

iPhone4sからiPhone6sプラスまで様々なサイズで、iOS8とiOS9で確認できるのはすごくありがたいです。

スクショも簡単〜〜〜

実機も合わせてiOS7から最新のまでチェックできるのは素晴らしい。

androidは知らない・・・・・・知らない・・けどここで様々なデバイスサイズで確認出来ます。

http://resizr.co

ただしiOSのバグなどが反映されているわけではなく、あくまで画面サイズが変更されるだけなので実機またはシミュレーターで確認はしておいた方が良いと思います。

サイズごとも大事ですがOSごとにちょっとずつ差があるのでその辺のチェックも大事です。

テーマを適用する

練習用で作っていたのをテーマファイルごともってきて、テーマを適用します。さらばおりブロ。

あとは微調整をしてリニューアル終了です。

お疲れ様でした〜

今回頑張ったところ

前よりちょっとだけ動きをつけたところと素材を頑張って作ったところですかね〜。

記事に毎回アイキャッチ画像をつけるのが億劫で、Swift記事とかはメモ程度の数行の場合もあるので、画像がある時とない時で潜水艦とお魚のデザインに変えているところとかも結構面倒でした。(cssで調整するのが。)でもphp使える分htmlとcssとjsで制作するより大分自由度が高くなる気がします。

今回この上２つのメニュー(PCでは左上のみ)の実装をjavascriptではなくcssで行っています。

💧と🔎のところです。

２つとも開くとこんな感じ

この実装が地味に大変でした。実装方法自体はそんなに難しくはないのですが、こう、スクロールした時の挙動とか、、、というかまだ記事の長さが足りないと埋まっちゃうという問題が残されているのですが

苦戦しました。(まだしてます。)

あとはデザインとかはまぁ好き勝手楽しくやってたんで・・・。尻尾部分や気球の調整やらが大変でしたが。ずれてたらごめんなさい・・・。

ちょっとしたお魚が揺れる〜とかいうアニメーションもcssでやってますよ。

色々また忘れないうちに個別で記事にしたいと思っています。

それとwordpress移行したあとなんですが、記事を交互に配置するの意外と面倒くさいですね。そこまで手こずってないですけども。

コメント欄をJetpackにしました

リニューアルの記事にも書きましたが、今回コメント欄をDISQUSからJetpackに変更しました。

どうせ全然こないけどね！！！！！！

・・・・・(´・ω・｀)

いやでもかわいんですよ？？

かわいいんですよ！！！！？

Twitterでログインしてコメントしてくださったらもうフォローしに行きますよ！！！？

Twitterアイコンがちゃんと反映されるんですよ！画質がなかなかやばいですけど。

wordpressでGravatar使用してだとまだ画質いいのかなぁ多分・・・・。

でもwordpress持っていない人は登録しなきゃなのでお持ちのTwitter/Facebook/Google+またはメールアドレスでコメントしてくださいな！お待ちしております。

割と一番のお気に入りポイントだったりします。コメント欄をクリックするとにょっと出てきますよ。この辺はJetpackコメントの特徴です。

こちらを参考にさせていただきました〜〜

WordPressのコメント欄、DisqusはやめてJetpackコメントにしてます

やっぱりDISQUSはちょっと機能が多すぎて自分自身どれが何のか理解してないので、ムムムって感じでしたね。使いこなせていなかったです。というかテスト〜ってコメントして以来使用されてないです(笑)

以前のと比べてみると

ででーん

beforeが完成系のものじゃないですけども。

ちょっとは成長できてるのか・・・な？できとるといいな・・・？

最後に感想とか

制作期間は作業していない日も含めて２０日です。多分半分くらいは作業してないです。笑

実際のコードを人に見せると引くほど汚そうなのでちょっと怖いですね。独学ですし。。。

デザインの時点で細かいピクセル単位の設定とかしたこともないし、多分一度誰かに弟子入りした方がいいんだろうなー。全体的に雑ですy

でもしばらくは変更しなくていいように〜と思って結構頑張って作ったので、多分しばらくはコレでいくと思います！個人的に気に入ってはいます！笑

誰か弟子にしてください。それでは。。