中級者クラスの各講座へGO！ 1.より使いやすいサイトを目指そう(1) 2.より使いやすいサイトを目指そう(2) 3.より使いやすいサイトを目指そう(3) 4.より使いやすいサイトを目指そう(4) 5.より使いやすいサイトを目指そう(5) 6.より使いやすいサイトを目指そう(6) 7.より使いやすいサイトを目指そう(7) 8.より使いやすいサイトを目指そう(8) 9.より使いやすいサイトを目指そう(9)

1.より使いやすいサイトを目指そう(1) ---レイアウトを見直そう--- 今月から中級者クラスがスタートする訳だけど、初心者クラスの復習は済んでるかな？ ばっちり！さらにいろんなことを学んで、この中級者クラスが終了した時にはもっと素敵なページが作れるようになりたいな。 一緒に頑張ろうね。 さて、前回（初心者クラス〜5.公開しよう）の最後に「フレームを使いたい」という話がでてたね。 うん。ちょっと縦に長いからスクロールが大変。フレームを使用していつもINDEXが表示されている状態にできたらいいな。 そうだね。特に「かな」のページは長いから、今後語句が増える事も考えて2ページくらいに分けてもいいかもしれないね。よし。手始めに「お助けページ」のレイアウトを見直す事から始めてみよう。 あと、ページを作る時にテーブルやテキストをもっと上手に配置したいな。スペーサーGIF（透過GIF）の使い方とか、どんなプラウザでも崩れにくいテーブルの組み方とか。 まぁまぁ気持ちは分かるけど慌てずに。（笑） まずは初心者クラスでも最初にやったように、ラフ原案を作ってみてね。 う〜ん・・・漠然としていて難しいなあ。　 「見てみよう」とか「使ってみよう」とユーザーに思わせるデザインって、難しいけど大事。「見やすいページ」「使いやすいページ」を目指して考えてみてね。ネット上には色々なデザインのサイトがあるから、参考になるサイトがあるはずだよ。 ---ラフ原案を作ってみよう--- こんなのを作ってみたよ。どう？ → ラフ画像 トップと各ページのそれぞれ2案ずつだね。 フレームを使うという事だから、トップはラフ原案2でいこう。トップページはフレームなしで各ページをフレーム化という方法もあるけど、その方が作りやすいしね。各ページはトップページに合わせて左右分割のフレームのラフ原案3でいこうか。 うん、そうしよう！INDEXがトップでも常に表示されるようにしたほうが使いやすいよね。 さて原案が決まったから少し細かく見るよ。 トップはアンケートの位置がばらけてたりしてバランスがイマイチかな？それにアンケートはメインのコンテンツじゃないから、一番目立つところにある必要はないよね。 それもそうだね。タイトルは大きさを生かすために真ん中に持ってきて、各ページへ飛ぶボタンはその回りに配置しようと思ったんだけどバランスって難しい・・。　　 それにINDEXの部分に五十音とアルファベットを一文字ずつ入れるなら、今までの画像は使わない事になるけど、テキストを使うのか、新しく画像を作るのか、また縦長にならないようにどう配置するのか。と言うのも考えなきゃね。テキストはページの表示は早いけど、ユーザーの環境でサイズが変わるから上手に使わないと使い勝手が悪くなるよ。逆に画像を使うとユーザーの環境にほとんど影響されないけど、読み込みは重たくなっちゃう。その辺も考慮に入れてどっちにするか考えてね。 → テーブルを使用したテキストのサイズ比較 なるほど・・・勉強になるなぁ。見やすいページにするにはどちらがいいか、もう一度他のサイトも参考にしてよく考えてみるね。 それじゃあちょっと大変かも知れないけど、もっと具体的な形でデザイン案を作り直してみてくれるかな？ラフ原案では抜けていた部分もあるし案としては大まかだったから、それも補ってね。ちゃこちゃん。やMyuさんにもその原案を見ればどう作ればいいか伝わるように、ね。 細かい部分やバランスに気をつけて書いてみたけど、今度はどうかな？ → ラフ決定案 うん。分かりやすくなったね。色がつくと可愛い感じがするなー。（笑） 恥ずかしぃ・・（笑）。でも頭の中のぼんやりしたイメージが色をつけて書いていくうちにはっきりしてきて、具体的なデザイン案を作ることは大事だなって感じたよ。　　 それじゃ次回はこの原案を元にフレームについて触れながら、もっと詳しく使いやすいサイトづくりを目指して勉強していこう。頑張ってついて来てね。 はーい！ちょっと難しくなりそうだけど、どんな内容か楽しみ〜。　　 　 >>NEXT（より使いやすいサイトを目指そう(2)）