ページデザイン プログラミング講座

質問

こんにちは。
今ホームページを作っているのですが、コンテンツにプログラミング講座を作ろうと思っています。
講座とは言っても自分はとても上級者とは言えないので初心者向けのものです。

その講座のデザインで悩んでおります。
見づらくなくする為に背景の色（画像）や文字色はどうしたらいいか、また、コードの所はインラインフレームにした方がいいか・・・等です。

アドバイス、または参考になるページを教えていただけたら助かります。

回答No.2

aloha1969 · ベストアンサー

No.1です。

インフレーム…脱字でしたね。すみません。

強調文字のサイズと色とですね。

・サイズについて
サイズの乱用は避けた方がいいですね。大見出＋中/小見出＋本文＋注釈等…多くて4サイズ位まででいくといいと思います。ページ毎に見方が変わってはいけないので統一性、法則性を持たせてやってください。

本文に関しては文字量が多い場合や説得力を持たせたい場合(特に講座なので)は大きすぎず小さすぎず…このような場合私は本文を0.75emを最小の基準としています(注釈等は除く)。強調は太字にし(サイズ変更はしない)その中でも更に強調したい場合は色をつけます。

見出に関してはh1,h2,h3タグと基本に沿った指定をしてください。それでも…という場合は調整ですね。本文とメリハリをつけリズムを作るのが読みやすさの秘訣です。

・色について
Webサイト/ページの基本カラーがあると思うので、文字の強調色には、それに沿った色(同系色)を持ってくるといいと思います。色の乱用は安っぽく見せてしまうので極力同系色(違う色の場合は彩度や明度を合わせる)で4,5色位に留めておくといいのではないでしょうか？特に色になれていない場合は同系色をお奨めします。
注意を喚起をする場合は赤色を追加使用するなど、一般的に認知(赤=注意/危険等)された色を使用することもお奨めします。
色に関しては諸条件で見え方が違うのでセーフティカラーが無難かと…しかし、それだとギラギラしてしまうので私はそれ以外を使用してしまいますが(チェックツールを使ったり、モニターやPCを変えるなどして確認をしながら)…。

アクセシビリティを考慮し文字サイズはem等可変サイズに対応した指定をしてくださいね。

回答No.3

aloha1969

再びNo.1です。

No.2に関しての補足です。

・色について…
4,5色というのはページ内の色数です。強調色は基本1色(リンクテキストとは差別化する)とすることで、どのページを見ても『ココ大切なんだ』と理解させてあげてください。

頭がまわっていないようなので方向違いの回答になってしまっていたら許してください。

ついでに…No1で書き忘れていた参考URLを…
文法チェック『Another HTML-lint gateway』
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

お礼

非常に丁寧にご回答いただきましてありがとうございます！！

強調は文字サイズを変えない、というのが意外でした。
前からCSSでstrongのサイズを大きくしていたので・・・。

> 本文とメリハリをつけリズムを作る
なるほど・・・。リズムですね！

色は大きな影響を与えますね。うまく使わないと大変なことになりそうです。

> 文法チェック『Another HTML-lint gateway』
これは以前から使っております。
一応満点になるようにしておりますが、なる「ように」じゃだめなんですよね・・・。

ご丁寧にありがとうございました！
教えていただいた事を忘れず製作を励んでいきたいと思います！

回答No.1

aloha1969

skykeyさんこんにちは。

どのような講座なのか凄く興味をひかれます。

さて本題。Webのデザインは「読みやすく」「わかりやすく」「操作しやすい」モノによっては「聞きやすい」というのが大原則です。アクセシビリティやユーザビリティという言葉をご存知でしょうか？この辺り理解していただくとデザイン(Webで言うところの)=設計というのがよくわかります。

そのあたり入門編ということで
『訪問者に優しいWebサイト作り』
http://www.mars.dti.ne.jp/~fuminG/index.html

チェックツールとして
『富士通アクセシビリティ・アシスタンス』
http://jp.fujitsu.com/about/design/ud/assistance/

を参考にしてみてください。

初歩ということでのアドバイスですが…指定がない場合は背景色は基本白がいいと思いますよ。そうすることでテキストの色等にそれほど神経を遣うこともありませんので(なんでも好きな色を使うということではありません)。

コードをコピー&ペーストで持っていってください…であればインラインフレームでもいいと思いますが、コードを詳しく説明(対比させたりして)するのであれば見にくくなるのではないでしょうか？そのあたりは一度作ってみて周囲の意見を聞くのが一番です。個人的にインフレームは好んで使いませんが…(プログラム専門ではありません)。

お力になれたかどうか…グラフィックデザイナーがつくるWebページという観点でアドバイスさせていただきました。ではでは…

お礼

お答えいただきありがとうございます。

やはり白が簡単かつ見易いですね。
インラインフレームは、説明が多くなりそうなので使わない方がいいと結論を出しました。

アドバイス＆アドレスありがとうございました！

・・・あと最初に質問を忘れていてにすみませんが、文字を強調する際の大きさや色はどうすればいいのでしょうか？もしよろしければお答えください。