スポンサーリンク
スポンサーリンク

サイトリニューアルによせて☆

カラーラフイラスト

2015年秋、朝絵roomとブログが一新いたしました!
この記事では、サイトリニューアルに対する想いや、大変だった事、どんなツールを使ったのかなどを色々と紹介していこうと思います☆

朝絵roomリニューアルによせて☆


朝絵room、前回のリニューアルが2009年。
それから6年。
2015年3月の新しいiMac購入を機に、サイトのリニューアルを思い立ちました。

2009年から時代が変わり、今やスマホ全盛の時代。
サイト作りの技術も大きく変わり、PCにしか対応していない朝絵roomは過去のものに。
それでも、約半数の方がスマホからアクセスして下さっていました。

スマホ対応何てあたしの技術では難しい。
tableタグによるレイアウトから、divタグによるレイアウトへの変更、コンテンツの移植作業も、膨大な手間がかかります。

それでも、これから先も創作活動を続けて行きたい!!
そんな想いから、リニューアルする事にしました。

レスポンシブデザイン
 
003.jpg

朝絵roomと、新しいブログは、レスポンシブデザインを採用しました!

レスポンシブデザインは、1つのhtmlファイルで全デバイスの表示に対応させる、割と新しい手法です☆
googleが、モバイルフレンドリーかどうかを、検索でのランキング指標に使用し始めたのが、2015年4月21日。
それ以前からgoogleではレスポンシブデザインを奨励している様で、4月21日以降このレスポンシブデザインが本格的なトレンドになって来ました。
FC2ブログの公式テンプレートも、8月からレスポンシブテンプレートが公開され始め、共有プラグインでも9月以降増えて来た感じです。
正に、今年のトレンド☆

PCから見ている方は、ぜひウインドウの幅を変えてみて下さいねヾ|*'-'*|
ホームページが、ウインドウに追従して表示されると思います♪
スマホみたいに小さくすると、サイドバーが下に落ちてスマホ対応の表示になります☆

ブートストラップ
 
朝絵roomは、cssフレームワークである、ブートストラップを採用しています☆

初心者でも簡単にレスポンシブデザインを使えるものだそう。
実際に使ってみて、まぁ色々と難しかったです^^;;

要するに、便利なスタイルシート(css)をセットであらかじめ作っておいたから、使ってみてね。って言うのが、cssフレームワーク☆
その中の1種類が、ブートストラップです。
FC2ブログみたいに、簡単にHPのテンプレート(デザイン)を変更出来るかも〜と期待しましたが、それは無理。
フォントサイズとか見出しとか、表組みとかボタンとか、レスポンシブグリッドとか、今風のデザイン要素を比較的簡単に呼び出す事が出来ます。

当初訳が分からなかったので、色々と動作テストしたり、初心者向けのチュートリアルで勉強したり。
作りながらも、出来ない出来ない、出来るはずなのに何で出来ない→検索して調べる→出来ない→もう一回調べる→やっぱり無理→更に調べてやっと出来た!もしくは諦めた。これの繰り返しで、やっと何となく使い方を覚えました。
特に、相性が悪いjqueryプラグインに当たった時は、もうそれだけで1〜3日飛んで行きました(涙
本当に時間が掛かりました。

その点、FC2ブログは本当に簡単ですね。
朝絵roomは、デザインの作成からテンプレート(ひな形)完成まで約20日。
新ブログは、たったの2日で完了してしまいました。
デザインが最初から出来てるって言うのは、やっぱ強いです。

朝絵roomはブートストラップ。
新ブログは、fc2テンプレート。
それぞれ、デザインの特徴が違うと思いますので、良かったら観察してみて下さいね♪

フラットデザイン

001.jpg

新しい朝絵roomは、今年のトレンドであるフラットデザインを意識しました☆
大きなレイアウトや配色は、以前の朝絵roomを継承しています。

フラットデザイン、調べてみたらボタン類などにグラデーションを多用せず、出来るだけフラットな色面でデザインを構成しようという考え方みたい。
MacさんもOS10.10yosemiteから採用してて、iphone等でも使ってる様ですね♪

凝ったデザインに世の中が飽きてきてて、シンプルなデザインの方が見やすく、むしろインパクトが出るだろう、みたいな方向性のデザイン。イスやテーブル等、長く使い続けられるプロダクトデザインの考え方から来ている様で、長く愛されるデザインというのがテーマだそうです。

実際に意識して作ってみた感じは、何か以前より明るい印象になったな〜って☆
プロのデザイナーさんには到底及ばないけど、趣味範囲で楽しく制作出来ました♪

Brackets

adobe Brackets編集画面
Brackets編集画面

ホームページ作成ソフトは、長年adobe DreamWeaverCS4を使って来ましたが、今回からadobeが開発しているフリーソフトのBracketsに変更。
単純に、DreamWeaverCS4を最新にアップグレードする予算がなかったから〜。
最新規格のhtml5で制作するので、ソフトも最新じゃないとまともにデザイン出来ないです。
実際に、新しい朝絵roomをDreamWeaverCS4で表示するともうぐちゃぐちゃ。
ただ、DreamWeaverCS4のテンプレート機能とFTP機能は便利なので使わせてもらってます☆

Bracketsは、htmlに特化したテキストエディタなので、htmlタグをある程度覚えてないと使えない代物でした。
今までダイアログに数字入力して、htmlは大方自動生成させていたので、新しくhtmlとcssを覚え直すのが大変でした。
ただ、このソフトによる作り方を覚えたら、色々と理解が深まった感じがします。
fc2ブログのテンプレートをカスタマイズするのにも、とっても役立ってます☆
一番便利な所は、Google Chromeでリアルタイムでプレビュー(ライブプレビュー)出来る所ですヾ|*'-'*|

adobe Bracketsライブプレビュー
adobe Bracketsライブプレビュー画面

ちなみに、デザイン作業はアドビイラストレーターCS6とフォトショップCS3を使いました☆

スケジュール

朝絵roomのリニューアル作業、6月に始まり結局公開が10月31日。
すっごく時間が掛かりました。
あぁ〜、大変だった...!!
スケジュールを簡単にメモしときます♪

・6/11〜7/1 本屋さんで最新トレンドとノウハウを調査、具体的なテスト&デザイン。コーディングまで。
・7/2〜7/15  全ページ移植作業(300ページ近くありました。)
・7/19〜9/1 リニューアル用のイラスト3枚制作(CLIP STUDIO PAINTの勉強しながら)
・9月〜10月中旬 風邪&精神的にもバランスを崩して、調子悪し。雑用に追われる。
・10/19〜10/30 公開のための最終調整。プラグインの設置や、新記事作成など。
・10/31   公開

レスポンシブデザインって簡単に出来るとかどこかで読みましたが、やっぱりホームページ作りは凝るととっても難しいですね!!

まとめ


ここまで、色々と大変だった事とか特徴とか書いてきましたが、これだけ苦労して作る理由って、とくかくこれからも続けて行きたいからなんですね〜ヾ|*'-'*|
最近は、お仕事を頂く機会が減ってしまったけど、お仕事の受注は大体ホームページから来ているのが現状。
今まで沢山お仕事を下さった方々にも感謝の意味を込めて、気合を入れてリニューアルしてみました☆

ただ、デザインが大切なのではなく、やっぱりコンテンツなんですよね。
なので、少しでも皆さんに楽しんでもらえる様な作品を、あと、お役に立てる様な情報をより多く更新して行けたらと思っています☆
でもでも!やっぱり自分が一番楽しんで運営するのが一番!!
あたしの楽しいが、皆さんに伝わるようなホームページ&ブログを目指そうと思います(*^v^*

折角気合を入れてリニューアルしたので、ちょっとづつでも更新して行きたいと思います♪
これからも、どうぞよろしくお願いいたします〜(*^▽^*)ノ☆

関連リンク

朝絵room
朝絵のお絵描きダイアリー
ブートストラップ
Brackets
検索結果をもっとモバイル フレンドリーに(googleウェブマスター向け公式ブログ)
スポンサーリンク
関連記事
  • はじめに (2015/11/08)