[HTML]デザインは、やはり大切だった!
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
デザイン無しでのサイト制作には限界がある
見切り発車で、[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]を始めてみましたが、どうやら限界のようです。
限界に至る一部始終をごらんください。
- [html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
- [html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
- [html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
- [html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
これ以降、記事が増えなかったのは、限界を感じ作業を進められなかったからです。
テンプレートがある状態でカスタマイズするのはすごく簡単だけど、何もない状態で作り上げるのは不可能に近いかもしれません。
サイトをしっかり作ることを考える
今回というか、以前に上記の方法で作業してみようと思ったのは、半ば実験的な部分も含まれています。
何も決めてない状態でどこまでできるのか?ということに少し興味がありました。
結果は、残念な結果に終わりましたが、中にはそのままいける人もいるかもしれません。
僕は、肩書きがデザイナーではありません。かといってデザインが出来ないかというとそういう訳でもないのです。
めんどくさがらず、最初からデザインを作ればよかったのです。
デザインを作ると決めたら必要なのはWF(ワイヤーフレーム)ですね。
この辺にこの要素を持ってくるとか、大筋の枠組みを決める作業です。
このWFが決まると、サイトのディレクトリ構成が必要になってきます。
どのコンテンツがどのディレクトリかを決める、いわゆるストラクチャーです。
ここまでの行程でデザインをしないでおくとWFの時間が端折れるんですが、結果的に無駄な時間が増えてしまいました。
これで、WFの重要性も再認識できましたし、デザインの重要性も再確認できました。
サイト制作の行程
サイト制作の行程として、人それぞれだとは思いますが、僕個人の進めやすい方法としては、まずWFを作ることです。
WFが無い事にはなにもできません。
次に、デザインを作る事です。
デザインは、コーディングの事を考えずに作る方がいいデザインになるかもしれません。
デザインは、トップページ・セカンドページ・詳細ページ・サイト内で使用するパーツを全部含めたコンポーネントの4つが理想です。
デザインと平行してサイト構成を考えます。
wordpressを使う場合、あまり必要ないかもしれませんが、パーマリンクの設定をカスタム設定で行う場合などを想定して一応作っておきます。
デザインが出来上がれば、まずは静的ページとしてHTMLに起こします。
ここではファイル名などはなんでもかまいません。
wordpressを使う場合、CSSのファイルがstyle.cssに全て入れなければいけないので、外部読み込みにするか全てを一枚に記述するか、管理のしやすい方を選びましょう。
全てのデザイン案のHTMLが出来上がれば、準備が完了です。
静的サイトの場合では、Dreamweaverを使うのであればテンプレート化をしなければなりません。
wordpressを使うのであれば、テーマを作成しなければなりません。
サイト制作というものは、このような行程を経て出来上がっております。
まとめ
結構身近な人に、「ちゃちゃっと簡単に出来るでしょ?」みたいな事を言われた経験がある人は少なくないと思います。
でも、サイトの制作はちゃちゃっと出来る場合(無料のテンプレートを使っちゃうとか)もありますが、そうでない事のほうが多いです。
デザインは、特に時間が必要です。
本当にこの場所でユーザーが納得するだろうか?この要素をここに置いて、気づいてもらえるだろうか?
などなど、考えを巡らせる事がたくさんあります。
今回は、デザイン無しで挫折したので、次回はデザインありで進めてみたいと思います。
ad
関連記事
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ