質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

6回答

1506閲覧

ホームページのデザインや配置について質問です! 

ako999

総合スコア100

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/09/10 08:43

ホームページを作るとき、
人間の習性などからサイトのデザインや配置を工夫しているという話を聞いたことがあります。

・ホームページの作成で気を付けていること。

・人間がサイトを見る時の習性、パターン

・見やすい工夫、使いやすいデザイン

など...。
ありましたら教えてください!!

※大学生を対象としたサイトを作成しています。
※委員会の企画で学校がある市の施設情報を検索できるようなサイトです。
※検索方法は施設名の欄にあるボタンを押すとその施設のGoogleマップへ移動できるというものです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

・人間がサイトを見る時の習性、パターン

私もまだまだ勉強中ですが、Web制作を始めた頃、「視線の動き」という概念に
衝撃を覚えた記憶があります。
http://07design.net/blog/?p=386
http://sitest.jp/blog/?p=1283

※大学生を対象としたサイトを作成しています。

ユーザ層から考えると、スマートフォンファーストで作成すると、
よりすっきりと作成できると思います。ご参考までに。

投稿2015/09/11 03:44

m-a-i

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

「ユーザビリティ」
「アクセシビリティ」
「ユーザエクスペリエンス」
といったキーワードで調べてみてください

私がWebデザインで最初に参考にした(今でも大好きな)のは、ヤコブ・ニールセン博士がWebユーザビリティについて書いたコラムの「Alertbox」です
ニールセン博士のAlertbox

以上ご参考まで

投稿2015/09/10 09:50

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

  • ファーストビュー(全くスクロール操作していない状態で見える範囲)で、目的に沿ったページであることがわかること。
  • 文字の大きさと行間隔の読みやすさへの配慮。(pタグやbrタグの連続ではなくスタイルシートを活用。)
  • 文章がページの端から端まであると視線移動がツラいので、適切な幅を考える。(2カラムや3カラム。)
  • 色使い的には、目がチカチカしないようやや彩度を落とす。
  • 読ませたい文や文章の周りはしっかり余白を確保する。

などいかがでしょうか。

投稿2015/09/10 08:52

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ako999

2015/09/10 08:59

回答ありがとうございます。 回答を見て自分の行動を思い返してみるとすごく納得できました。 早速やってみます!!
guest

0

よく話される事なのですが、そのサイトの集客層を想定してデザインすべきと言われますよね。

若い女性の方を対象にするファッションサイトやアクセサリーサイト等の場合はその対象の習性を考えます。
まずも、最近ではスマホでのアクセスが急増する為、スマートフォンの対応は必須ですよね。

他にも、食品等を扱ったりする居酒屋等は、スマートフォンからアクセスされるのはもちろん、
外出先から急遽しら調べて来店する事もありますので、コンテンツの配置はもちろん、内容をより分かりやすい内容にする必要があります。

投稿2015/09/15 02:00

fukumi822

総合スコア228

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

非常にシンプルなことですが視線の動きがありますね。
左から右、上から下に視線は移動します。

ターゲットとなる層に対して有効的なデザインを意識します。
色や、形、文字の大きさや対応デバイスが非常に重要になります。

上記を前提にしてユーザビリティを考え、クリックできること、何らかの動作ができることは明示的に示すようにします。
具体的にはホバー時に色を変えるといったことがあげられますね。
またボタンはアイコンにするのか、文字にするのかといったことが使い勝手に大きな違いを生むことでしょう。

全体としては
・色(感情的にどう感じるか、見やすい、背景色と文字色は読みやすい色味か)
・文字(大きさは適切か、文章は読みやすいか)
・構成(使いやすい配置か、重要な要素の見せ方は正しいか、グループ化に違和感はないか)
・操作(操作できること、できないことが明確に分かるか。処理中であることなどがわかるのか)
・速度(表示は高速か?動作は安定しているか)
などが分かりやすい、使いやすいサイト作りの基準でしょう。

投稿2015/09/14 16:44

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

ホームページの作成で気を付けていること。

そのホームページは誰に見られるのか。見せたいのかということを意識して、
デザイン・文章内容・文章量・機能に気を付けています。

人間がサイトを見る時の習性、パターン

[※大学生を対象としたサイトを作成しています。 ]とおっしゃっているので、
ターゲットは明確ですね。
まずはこのターゲットを分析してみましょう。

見やすい工夫、使いやすいデザイン

[※委員会の企画で学校がある市の施設情報を検索できるようなサイトです。 ]
[※検索方法は施設名の欄にあるボタンを押すとその施設のGoogleマップへ移動できるというものです。]
といった機能があるので、この機能にたどり着くまでの導線を考えてみてください。
【例】
▶検索は施設名を入力するものなのか→施設名を知らない場合も多いのでは
▶目的別にカテゴリ分類(施設の分類:体育館・会議室・音楽室等目的による分類)があれば、
ターゲットが情報を探しやすくなるのでは。
などなど、分析をしたターゲットがどういう行動をそのホームページ内でするのかを分析・想定をするといいと思います。

制作頑張ってくださいね

投稿2015/09/10 10:14

Iks

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問