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

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

[HTML]デザインは、やはり大切だった!

公開日: : html5, Web制作 ,


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回]を始めてみましたが、どうやら限界のようです。

限界に至る一部始終をごらんください。

これ以降、記事が増えなかったのは、限界を感じ作業を進められなかったからです。

テンプレートがある状態でカスタマイズするのはすごく簡単だけど、何もない状態で作り上げるのは不可能に近いかもしれません。

サイトをしっかり作ることを考える

今回というか、以前に上記の方法で作業してみようと思ったのは、半ば実験的な部分も含まれています。
何も決めてない状態でどこまでできるのか?ということに少し興味がありました。

結果は、残念な結果に終わりましたが、中にはそのままいける人もいるかもしれません。

僕は、肩書きがデザイナーではありません。かといってデザインが出来ないかというとそういう訳でもないのです。
めんどくさがらず、最初からデザインを作ればよかったのです。

デザインを作ると決めたら必要なのはWF(ワイヤーフレーム)ですね。
この辺にこの要素を持ってくるとか、大筋の枠組みを決める作業です。

このWFが決まると、サイトのディレクトリ構成が必要になってきます。
どのコンテンツがどのディレクトリかを決める、いわゆるストラクチャーです。

ここまでの行程でデザインをしないでおくとWFの時間が端折れるんですが、結果的に無駄な時間が増えてしまいました。
これで、WFの重要性も再認識できましたし、デザインの重要性も再確認できました。

サイト制作の行程

サイト制作の行程として、人それぞれだとは思いますが、僕個人の進めやすい方法としては、まずWFを作ることです。
WFが無い事にはなにもできません。

次に、デザインを作る事です。
デザインは、コーディングの事を考えずに作る方がいいデザインになるかもしれません。

デザインは、トップページ・セカンドページ・詳細ページ・サイト内で使用するパーツを全部含めたコンポーネントの4つが理想です。

デザインと平行してサイト構成を考えます。
wordpressを使う場合、あまり必要ないかもしれませんが、パーマリンクの設定をカスタム設定で行う場合などを想定して一応作っておきます。

デザインが出来上がれば、まずは静的ページとしてHTMLに起こします。
ここではファイル名などはなんでもかまいません。

wordpressを使う場合、CSSのファイルがstyle.cssに全て入れなければいけないので、外部読み込みにするか全てを一枚に記述するか、管理のしやすい方を選びましょう。

全てのデザイン案のHTMLが出来上がれば、準備が完了です。
静的サイトの場合では、Dreamweaverを使うのであればテンプレート化をしなければなりません。
wordpressを使うのであれば、テーマを作成しなければなりません。

サイト制作というものは、このような行程を経て出来上がっております。

まとめ

結構身近な人に、「ちゃちゃっと簡単に出来るでしょ?」みたいな事を言われた経験がある人は少なくないと思います。
でも、サイトの制作はちゃちゃっと出来る場合(無料のテンプレートを使っちゃうとか)もありますが、そうでない事のほうが多いです。

デザインは、特に時間が必要です。
本当にこの場所でユーザーが納得するだろうか?この要素をここに置いて、気づいてもらえるだろうか?
などなど、考えを巡らせる事がたくさんあります。

今回は、デザイン無しで挫折したので、次回はデザインありで進めてみたいと思います。

ad

関連記事

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

[Dreamweaver] テンプレート機能初級編!

まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー

記事を読む

[jQuery] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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