![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
よくWebページをデザインする際に、優れたデザインのページを真似するとよいといわれていますよね。
(もちろん、真似といっても、基本デザインを参考にさせていただきたいということです)
そこで、たとえば、Yahooのニュース画面の構成を真似をしようとしたとします。
ソースを表示すると、とても長いhtmlコードが表示されるため、その中から必要なコードを取り出して…と手を加えているうちに、だんだん元のデザイン構成がガタガタになってしまい、参考にならなくなってしまいます。
スタイルシートや段落が原因かと思うのですが、ページの中で多くのスタイルシートを参照していたり、段落が込み入ってたりして、どれがどう関係し合ってるかを知るだけでも困難です。
みなさんは、誰かのデザインを参考にする際、どのようにして自分のデザインに取り入れているのでしょうか?画面構成を見ながら、自力で作成するのでしょうか?根気よくスタイルシートを読み解くのでしょうか?
私はHTMLについては基本的な勉強はしていますが、デザインについては初心者で、また、残念ながらデザインにかけられる時間も余りありません。
何か有効なポイントなどありましたら、教えていただけないでしょうか。
No.3ベストアンサー
- 回答日時:
web 制作自身に慣れていないように思います。
web の場合、まず始めに HTML で必要な情報を掲載します。当然機能を入れる為に、プログラムを入れる等も構いません。
次に、デザイン、インターフェース部分をグラフィックソフトで、作成します。
この時点は、html とデザインは別物です。
デザインが OK になったら、デザインをパーツに分解し、CSS にて HTML にはめ込むと言う流れになります。
実は、この css が結構曲者で、ブラウザの互換等で結構悩むと思います。
多分ブログラムだって、始めはソースを真似ると思います。次にソースを改造し、オリジナルのソースを書けるようになると思います。
デザインを真似ると言うことも、同じ意味ではないでしょうか。
web はその後、そのデザインを CSS で表現します。
決して HTML でデザインをする訳でありません。
他のプログラミングで、デザインの関係は知りませんが、web においては完全に分離されていると理解して良いと思います。
プログラマーさんなら、CSS の基本的な事ならすぐに理解出来ると思います。
まずは、グラフィックでデザインを真似てみてください。
プロセスを丁寧に教えていただき、とても参考になりました。
確かに、デザインとHTMLの掲載を同時にやるのは非効率ですね。
まずHTMLでの情報の掲載、GUIの作成までを確実に終わらせたいと思います。
CSSでのデザインを他の得意な人にお任せできればベストなんですが、そうもいかないので努力したいと思います。
ありがとうございました。
No.4
- 回答日時:
自分が『真似』る時は、『真似』たいウェブサイトのhtmlソースとcssソースを読み解きます。
『あーこういう構成にしたいときはこういう風に書けばいいんだな』
ってことを理解するのです。
慣れないうちは時間がすごくかかります。
すごく気に入ったかっこいいデザイン程、複雑だったりします。
だからはじめは簡単そうなデザインのものを選ぶ方がいいかもしれません。
あとサイト(作る人)によってコードのきれいなものとそうでないものがあります。
これはどのプログラムソースでも同じですね。
いろいろなサイトのソースを見比べていくしかないです。
> その中から必要なコードを取り出して…
これはちょっと無理じゃないかなぁ。
あと、FireFoxのアドオンとか使うとちょっとは便利になるかも。
(IEにもあるかもしれないけど、検証用にしか使っていないので知りません。)
ありがとうございます。
やはり、皆さん苦労しているのですね。
真似については、大抵「そうすると良いですよ」とさらっと書かれていることが多いので、そんな簡単にできるのかな、と思ったのですが、甘かったです;
でも、教えていただいたことで目星がついてきました。
FireFoxのアドオンをさっそくインストールしてみました。
別タブでソースを開くというだけでも随分楽になった印象です。
また、↓下記の方へのお礼になりますが、CSSの本も買ってみたらこれは使いやすいと納得しました。
がんばって少なくとも見苦しい画面になることは防ぎたいと思います…!
No.1
- 回答日時:
デザインを真似るなら、ソースを読む必要は無いのでは?
単にグラフィックソフトの使い方や、カラーを学べば良いのでは?
その後、出来たデザインをどのように、html、css に反映するかだと思います。
>私はHTMLについては基本的な勉強はしていますが、デザインについては初心者で、また、残念ながらデザインにかけられる時間も余りありません。
上記はどのような意味でしょうか?
デザインを学ぶ為に、デザインを学ぶのではないでしょうか?
ありがとうございます。
本職はPGなので、本来は画面デザインは担当外なのですが、
他にデザインを行う人がいない(予算がない…)ので
デザインも含めて実装する予定になっています。
しかし、大抵プログラム内部を実装していると、デザインは後回しになってしまい、最終的に素人感溢れる画面になってしまいますので、それを何とかしたいと考えていました。
素人向けのデザイン関係のHPを参照すると、大抵は「よい画面を真似すること」とあるのですが、実際にはそれ自体難しいと感じています。
何事もそう簡単にはいかないのでしょうけれども。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Web・クリエイティブ 趣味でグラフィックデザインをして見たいと最近考えてるのですが、質問で、平面構成のデザインとはなんです 1 2022/08/21 19:32
- 特撮 平成の仮面ライダーは 龍騎 555 飛ばして カブト キバしか 観てなかったけど。 仮面ライダーのデ 3 2022/10/29 23:29
- HTML・CSS お金をあまりかけずにプログラミングを勉強する方法を教えてください。 こんにちは。 Webデザイン系の 3 2022/08/05 03:22
- Web・クリエイティブ 今本当に悩んでいます。将来グラフィックデザイナーを目指し専門学校に通ってるのですが、正直グラフィック 1 2022/09/10 17:58
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- 転職 転職活動中 会社選びで迷っています 3 2022/09/05 06:10
- 国産車 新型フィットのデザイン 知り合いが昔HONDAで働いていたそうです。ホンダは結構先進的なデザインを先 1 2022/09/24 18:53
- Web・クリエイティブ 未経験からのWebデザインとプログラマーについて。 4 2022/10/12 00:00
- HTML・CSS 依頼したWEBサイトの修正に追加料金がかかる 10 2022/10/24 09:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【VC++6.0(MFC)】Access Violat...
-
VC6でCRC64・CRC128が出来るソ...
-
Visual Source Safe?
-
ブラウザのソース表示と著作権...
-
自分のPCではリンクがとぶのに...
-
Dreamweaverのコードカラーが黒...
-
一発ロボのロボット型サーチエ...
-
不明なタブ
-
VC++でマイクを使いたいんですが……
-
画像と文字が重なって表示される。
-
VisualBasicがインストールされ...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
<a target="_top" href="***.ht...
-
iPadの標準ブラウザでローカルH...
-
Webサイトから、txtファイルを...
-
リンク先からリンク元の、同じ...
-
【HTML】1クリックで複数ファイ...
-
htmlの謎
-
form action="#"
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
レストラン、英語のメニュー表記
-
VBAで#Regionに変わるものは無...
-
Dreamweaverのコードカラーが黒...
-
ソースの追加行数と変更行数
-
#ifdef多用でソースが見づらい
-
JSPの実行結果をHTMLに変換
-
VBAでhtmlソースから特定の文字...
-
画像と文字が重なって表示される。
-
VB詳しい方
-
「MicrosoftVisualBasic6.0 行...
-
ソースの表示を無効にする方法。
-
【VB.NET】WebページのDOMソー...
-
htmlのタブの色変更について
-
Visual Source Safe?
-
c言語の改修されたソースから改...
-
VisualStudio2010でデバッグソ...
-
COBOLのCALL文について
-
google Map APIの使い方
-
ライブラリにない関数の定義
-
HTMLのソースを文字化けさせる...
おすすめ情報