Webデザインの真似の仕方とは？

質問

よくWebページをデザインする際に、優れたデザインのページを真似するとよいといわれていますよね。
（もちろん、真似といっても、基本デザインを参考にさせていただきたいということです）

そこで、たとえば、Yahooのニュース画面の構成を真似をしようとしたとします。
ソースを表示すると、とても長いhtmlコードが表示されるため、その中から必要なコードを取り出して…と手を加えているうちに、だんだん元のデザイン構成がガタガタになってしまい、参考にならなくなってしまいます。
スタイルシートや段落が原因かと思うのですが、ページの中で多くのスタイルシートを参照していたり、段落が込み入ってたりして、どれがどう関係し合ってるかを知るだけでも困難です。

みなさんは、誰かのデザインを参考にする際、どのようにして自分のデザインに取り入れているのでしょうか？画面構成を見ながら、自力で作成するのでしょうか？根気よくスタイルシートを読み解くのでしょうか？
私はHTMLについては基本的な勉強はしていますが、デザインについては初心者で、また、残念ながらデザインにかけられる時間も余りありません。

何か有効なポイントなどありましたら、教えていただけないでしょうか。

回答No.3

nori_007 · ベストアンサー

web 制作自身に慣れていないように思います。
web の場合、まず始めに HTML で必要な情報を掲載します。当然機能を入れる為に、プログラムを入れる等も構いません。

次に、デザイン、インターフェース部分をグラフィックソフトで、作成します。

この時点は、html とデザインは別物です。
デザインが OK になったら、デザインをパーツに分解し、CSS にて HTML にはめ込むと言う流れになります。

実は、この css が結構曲者で、ブラウザの互換等で結構悩むと思います。

多分ブログラムだって、始めはソースを真似ると思います。次にソースを改造し、オリジナルのソースを書けるようになると思います。
デザインを真似ると言うことも、同じ意味ではないでしょうか。

web はその後、そのデザインを CSS で表現します。
決して HTML でデザインをする訳でありません。
他のプログラミングで、デザインの関係は知りませんが、web においては完全に分離されていると理解して良いと思います。

プログラマーさんなら、CSS の基本的な事ならすぐに理解出来ると思います。
まずは、グラフィックでデザインを真似てみてください。

お礼

プロセスを丁寧に教えていただき、とても参考になりました。

確かに、デザインとHTMLの掲載を同時にやるのは非効率ですね。

まずHTMLでの情報の掲載、GUIの作成までを確実に終わらせたいと思います。
CSSでのデザインを他の得意な人にお任せできればベストなんですが、そうもいかないので努力したいと思います。

ありがとうございました。

回答No.4

OKwebb

自分が『真似』る時は、『真似』たいウェブサイトのhtmlソースとcssソースを読み解きます。
『あーこういう構成にしたいときはこういう風に書けばいいんだな』
ってことを理解するのです。
慣れないうちは時間がすごくかかります。
すごく気に入ったかっこいいデザイン程、複雑だったりします。
だからはじめは簡単そうなデザインのものを選ぶ方がいいかもしれません。
あとサイト（作る人）によってコードのきれいなものとそうでないものがあります。
これはどのプログラムソースでも同じですね。
いろいろなサイトのソースを見比べていくしかないです。

> その中から必要なコードを取り出して…
これはちょっと無理じゃないかなぁ。

あと、FireFoxのアドオンとか使うとちょっとは便利になるかも。
（IEにもあるかもしれないけど、検証用にしか使っていないので知りません。）

お礼

ありがとうございます。

やはり、皆さん苦労しているのですね。
真似については、大抵「そうすると良いですよ」とさらっと書かれていることが多いので、そんな簡単にできるのかな、と思ったのですが、甘かったです；
でも、教えていただいたことで目星がついてきました。

FireFoxのアドオンをさっそくインストールしてみました。
別タブでソースを開くというだけでも随分楽になった印象です。

また、↓下記の方へのお礼になりますが、CSSの本も買ってみたらこれは使いやすいと納得しました。
がんばって少なくとも見苦しい画面になることは防ぎたいと思います…！

回答No.2

tenderfeel

「優れたデザインのページを真似するとよい」＝「模写やトレースを繰り返しているうちに技術が身に付く」
Webの場合ならPhotoshopとかで参考サイトをお手本にラフ（モックアップ）を作成するだけでいいと思います。
そもそもツールの使い方が分かってないとデザイン作れないですしね。

お礼

ありがとうございます。

ラフの作成はおおまかにできているのですが、そのままデザインの実装に入るのは無謀でしたね。

回答No.1

nori_007

デザインを真似るなら、ソースを読む必要は無いのでは？
単にグラフィックソフトの使い方や、カラーを学べば良いのでは？

その後、出来たデザインをどのように、html、css に反映するかだと思います。

>私はHTMLについては基本的な勉強はしていますが、デザインについては初心者で、また、残念ながらデザインにかけられる時間も余りありません。

上記はどのような意味でしょうか？
デザインを学ぶ為に、デザインを学ぶのではないでしょうか？

お礼

ありがとうございます。
本職はPGなので、本来は画面デザインは担当外なのですが、
他にデザインを行う人がいない（予算がない…）ので
デザインも含めて実装する予定になっています。

しかし、大抵プログラム内部を実装していると、デザインは後回しになってしまい、最終的に素人感溢れる画面になってしまいますので、それを何とかしたいと考えていました。

素人向けのデザイン関係のHPを参照すると、大抵は「よい画面を真似すること」とあるのですが、実際にはそれ自体難しいと感じています。
何事もそう簡単にはいかないのでしょうけれども。