よく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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プログラム時のヘッダコメント...
-
ソースの表示を無効にする方法。
-
C/C++ をHTML変換するツールを...
-
ログイン後のソースをw3getで取...
-
模写コーディングでソースの表...
-
レストラン、英語のメニュー表記
-
WebBrowser で JavaScript を見...
-
java_run.batがダウンロードで...
-
HTMLからフォルダを開きたい
-
googleドライブで、PDFファイル...
-
どのページもすべて同じURLなの...
-
HTMLページが勝手にダウンロー...
-
医療画像(Windows用)をMacで...
-
ページ全体を中央に配置したい...
-
フォルダ内の最初のファイル名...
-
PS4で、「バージョン5.05以上の...
-
HPにPDFデータを載せるの...
-
メモ帳でデータが消えるのです...
-
文字コードについて
-
無償で使えた Turbo D...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Dreamweaverのコードカラーが黒...
-
VBAで#Regionに変わるものは無...
-
generatorとは?
-
ソースの追加行数と変更行数
-
レストラン、英語のメニュー表記
-
【VC++6.0(MFC)】Access Violat...
-
Visual Source Safe?
-
#ifdef多用でソースが見づらい
-
VB詳しい方
-
JSPの実行結果をHTMLに変換
-
プログラム時のヘッダコメント...
-
「MicrosoftVisualBasic6.0 行...
-
VisualBasicがインストールされ...
-
VC++でマイクを使いたいんですが……
-
htmlのタブの色変更について
-
HTMLメールを送りたい
-
C/C++ をHTML変換するツールを...
-
【VC+ 2005】CStringは使えない...
-
MATLABのソースを見ることので...
-
fc2ホームページについて
おすすめ情報