どの箇所でしょうか。(多々あると思いますが、あえて1点のみ)
http://francais.jp
私個人としては、
“このサイトは~”という文字フォントを変えようかと思っております。
少し横に長いデザインのような気がします。
見る人の画面によってはスクロールしなきゃいけないと思うので
横の幅をもう少しどうにかなったら見やすいのではないでしょうか。
●右のムービーナビゲーションの削除。
●身も蓋もない言い方になってしまいますが、メインコンテンツが沈んでしまっています。
http://www.info-japan.net/samp/filter.gif(キャプチャをとって、フィルタをかけた画像。)
●右のムービーナビゲーションが与える違和感に比べると、フォントの問題はむしろ小さいと感じます。
右のムービーの違和感、
確かにそうかもしれないです。
ただそれをとると
動きがなくなってしまって…。
確かに。
横に伸びて、
ぼやーーっとしてるかもしれません。
このバナーは、
横浜月間からの配布なので
デザイン変更はしないようにしてます。
【0】まとめ
このページの唯一つの主目的を決めて、
その目的が分かるデザインにするべきだと思いました。
具体的には、中央部を写真とSNSの紹介のみに当てるべきだと思います。
以下で、まず私が見たこのページの第一印象を記し、
それを論拠に改案の詳細を記します。
【1】このページの第一印象
まず、このページのコンテンツを
目に入ったものの順番に並べてみます。
(これは私が見た限りです)
①右のムービーリスト
②五重(?)塔
③フランスの町並み
④中央の「France SNSは、フランコ…」
⑤ログイン用入力ボックス
⑥左上「France SNS」のロゴ
⑦左下ブログなどへのリンク
この限りでは、
①が目立つことと・⑦が④と同等のポジションにいることから、
⑤のログインページとしての役割以上に、
色々なページへのリンクが主目的だと感じられました。
このように色々な情報が同等の重さで置かれているのは、
使い慣れた人のためのデザインだと思います。
【2】改案の詳細
私の改案は以下の通りです。
一つだけ直すとしたら、⑦を画面下端に一列に並べ、
代わりに「France SNS est・・・」という仏語紹介文を持ってきます。
日本とフランスが対角線で交わりあうデザインです。
①のムービーリストは目立っている反面、
浮いてもいるので優先的にいじらなくても大丈夫だと思いました。
【3】参照
死ぬほど蛇足ですが、デザインは目的に合わせて評価される、ということを述べたページです。
>日本とフランスが対角線で交わりあうデザインです。
なるほど!
貴重なアドバイス有難うございました。
とりあえずSTARTする、
ために
ああいう
いまいちな状態でのSTARTとなりましたw
文字等もMacではだいぶ崩れてしまってますが、デザイン的に気になるのは上部のグレーのベタ部分ですかね。ベタをひかないか、同系色の濃淡の方が良いと思います。
>上部のグレーのベタ部分
色が浮いてますか…。
修正いたします。
左上のロゴにインパクトが足りないなと感じました。
まずパッと見て「何のサイトなのか?」がわかるように、ロゴにインパクトを持たせる、もしくは「日本」「フランス」「SNS」などのキーワードを強調する仕掛けがあると良いのではないでしょうか。
>左上のロゴにインパクトが足りないなと
大変参考になります。
素人さが出すぎてますよね。
修正致します。
なんだか、テキスト部分の改行が落ち着かないので、
メール/パスワードの入力部分を下げて、
「France SNSは~」の部分を右に広げるのはどうでしょうか。
>テキスト部分の改行が落ち着かないので
うまく文字数が合わず、
おかしなことになってしまって。
有難うございます。
Firefoxで画面が崩れない様に修正する。
http://www.mozilla-japan.org/products/firefox/central.html
これが修正点に当てはまらないとすると、もう少し横幅を小さくしてコンパクトな感じに仕上げる、というのを修正点として挙げたいと思います。
>Firefoxで画面が崩れない様に
実は以前会員さんから似たような声を聞きました…。
有難うございます!
そうかもしれませんが、
それ以外に
“動き”を出す方法がなく…。
一点直すとすれば全体的に画像を修正します。
背景の画像が一つになっているのが気になります。
http://francais.jp/img.php?filename=skin_skin_login_1175417704.j...
またバナーの画像もロゴの縦横比が変になっている様に感じます。
http://francais.jp/img.php?filename=b_22_1179401093.jpg
配置ももちろん大切な部分ですが、画像が印象づけるイメージも大きいです。
以下は他の質問の回答に対して思った事です。
ムービーリストを取り外して「動きが・・・」というのでしたら、ログインフォーム等が入っているコンテナの背景に動きのある画像を配置してみるのはいかがでしょうか。ロゴ部分をFlashで作成して動きを与えるのも有りかも知れません。
>ロゴ部分をFlashで作成して動きを与えるのも有りかも
いいかしれないですね!
Flash勉強してみます。
1:『France SNS』という自サイトロゴより『横浜フランス月間』ロゴの方が目立っています。これでは何のサイトなのか不明です。多少縮小するだけでも違うと思いますが、バナーサイズを変更出来ないなら、テキストリンク+小さいGIFアニメーションアイコンを付ける等で対応するのは如何でしょうか。
2:右の動画紹介部分、「これしか動きを出す方法が無い」とのことですが、そのためだけに置くことはデザインを崩すだけで、何のメリットもないように思います。動きを出すことは、FlashやGIFアニメだけでなく、CSSでも可能ですよね。例えば、街角と五重塔の写真をマウスオーバー時にそれぞれ別の写真とすり替えるとか(MYはてなページでやっているような感じ)。以下のリンクはCSSの動きを追求していらっしゃるサイトです。ご参考まで。
http://www.cssplay.co.uk/index.html
3:全体にメリハリがないので、全部が地味に感じるのではないでしょうか。例えば、ログイン関係部分をロゴの下に横並びにする(ログインボタンはもう少し小さくする)、その分、写真を大きく扱ってマウスオーバーで変化を持たせる、上で他の方も仰っていましたが、説明テキストは日本語とフランス語対角で分けるなど。。。
4:firefoxだけでなく、safariでも表示崩れが起きています。具体的には『France SNSは、フランコフォンと・・・』部分がはみ出している、リスト扱いの部分の内『Questions/Reponses』が先頭のリストマークから外れている、下部利用規約部分が『DESIGN BY・・・』に被っている、というものです。
>全体にメリハリがないので、全部が地味に
>firefoxだけでなく、safariでも表示崩れが
有難うございます!!
タイトルロゴが、あまりに凝っていないのが気になります。
ロゴの解像度が低いのか、背景の紫色との境界がぼやけており、
ぱっとしない印象が強いです。
ロゴをもう少し作り込み(影をつける、書体や字詰め、フォントの縦横の比率を変える、部分的に透過処理をする、マークを加えるなど適宜アレンジ)、かつ、背景と目立つようにしたらどうでしょうか。
作り方などは以下に紹介されています。
>ロゴの解像度が低いのか、背景の紫色との境界がぼやけており
ロゴって大事ですもんね。
有難うございます!
私もムービーはいらないと思います。
「動きがなくなってしまう」と困っているようですが、閲覧者の大半は動きなんかなくてよいと思っていると思います。
そのサイトはSNSを利用する人が来るのであって、ムービーが見たい人が来るのではないので、やっぱり不要なムービーはいらないと思います。どうしてもムービーを紹介したいなら、ムービーのページを別に作ってリンクすればよいと思います。
http://mynotes.jp/lecture/access/access4
↑の「軽いページ・シンプルなページ」の最後の「動きをつけない」の所が参考になるかと思います。
大変参考になりました。
無駄に動きをつけるのはよくないようですね。
検討します!
それぞれの国旗を入れたら、もっとわかりやすくならないでしょうか?
お国の色を強調するのはアリかなぁ、と。
あと、お寺の対角は、エッフェル塔や凱旋門など、
いかにもフランス!!な写真だとわかりやすいと思います
(季節で変更すればよいし)
>お寺の対角は、エッフェル塔や凱旋門など、
いかにもフランス!!な写真だと
その方がいいですかね!
画像をいちから選んでみます。
>見る人の画面によってはスクロールしなきゃいけない
有難うございます。
スクロールするのは面倒ですもんね。