上記サイトをHTML5で制作しました。
HTML5 や CSS のかきかたで改善した方が良い点がありましたら教えてください。
また、デザインなどについての意見もお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答9件
0
こういった、フロントの制作物を見てレビューしてもらうっていう使い方も素敵ですね!
みなさますごく具体的かつ的確なご回答で素晴らしいです。
デザイナーの視点でコメントしてみます!
■ユーザビリティを考慮するなら、このサイトの
画面右上のハンバーガーメニュー格納は必要無いと感じました。
なぜなら、ナビゲーションが3つしかないのでヘッダー内に格納してあげたほうが一覧性が良いからです。
また、スマホで見た場合でも3つなら入るだろう、と感じました。
ナビゲーションが増えてきたら、使えるUIですよね!
■雪(?)が降っているのがとても気になりました…。
技術的にはとてもすごいと思うのですが、やはり情報を読み取りづらいと感じてしまいました。
こういったアニメーション技術は、「注目させたい」場所(例えばサービスの特徴を表すメインビジュアル部分など)に使用するととても効果的だと思います!
■テキストリンクの色は、基本的に大体がデフォルトである青色にしたほうがリンクであることを認識しやすいと思います!
■メインカラムの見出しレベル > サイドカラムの見出しレベル
であることが一般的であると思います。
リボンの見出しスタイルをメインに使用して、サイトカラムの見出しは下線にするなど装飾を弱めた方がコンテンツの強弱がついて、ユーザーに伝えたい情報に優先順位がつけられます!
とても有意義な質疑応答ですね!
頑張ってください!
投稿2014/12/03 13:42
総合スコア240
0
HTML
h1タグはサイトのタイトルに使った方がいい。サイトの顔は目立たせないと。
記事タイトルはh2からで充分。サイズが足りなければスタイル上書き
CSS
フォントサイズの単位の指定が混在してる。remとかで統一したほうが後々楽。
transitionプロパティはallにするよりtransitionをかけるプロパティを指定する方がいい。
色の指定で色名とhexが混在している。hexも3桁6桁が混在しているため統一
デザイン
サイドバー表示のボタンの位置は左側の方がいいんじゃないかな?
footerがブラウザ下部から浮いて見えてしまう可能性。html要素にbackground-color:#000000しとくといいかも。
ぱっと見こんなところでしょうか
投稿2014/11/29 19:45
総合スコア507
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
デザイン:
メニューを表示するためのボタンが右過ぎる気がする。押しにくかった。
パンくずリストで、色がすべて一緒になっているが、自分の現在位置以外の色を替えるとかしたほうがよりわかりやすい。
コード:
- <script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>が効いてないのではないか?という疑問。リンクを押したら、Forbiddenと表示されているので、無駄なコードは消したほうがよい。
- 表示速度の観点から言うと、javascriptのソースコードは一番下に記述するほうが良い。
投稿2014/11/24 07:52
総合スコア23
0
ベストアンサー
こういう相談って、ありそうでなかったですね。
新しい利用方法だと思います。 不躾ながら言いたいこと言わせて頂きます。
■デザイン
・右上のメニュー呼び出しボタンがある場合、スライドメニューが出るのは右からがいいと思います。
(ボタンが右にあるなら右からスライドするのが直感的な為。)
・右上メニューを付けるならば、大きくして視認性を高めた方がいい。
・<aside>と<article>の1つ目のタイトルのタイトル背景(黒背景部分)の上位置を合わせたほうが良い。
・各ブロックの余白がなく圧迫感があるので、余白をもう少し多く取ったほうが良い
・フッターを下固定にさせた方がスッキリ見えそう。
■コード
・リンク先の無い<a>タグのhrefには「href="javascript:void(0)"」を付けるか、コメントアウトしておけばいい。
・フッターのコピーライトにある「(c)」は実体参照文字を使った方がいい?
頑張ってください。
投稿2014/12/03 18:47
総合スコア44
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
他の方もおっしゃっていますが、個人的にはフッターが浮いてしまっている(フッターの下に無駄なスペースがある)のが気になります。
lang
1html,body { 2 height: 100%; 3}
として、ウィンドウいっぱいに高さを確保し、
lang
1main,aside { 2 padding-bottom: 150px; 3} 4footer{ 5 position: absolute; 6 bottom: 0; 7 height: 150px; 8}
footerをabsolute(絶対位置)で下部に固定することで無駄なスペースを省くことができます。
投稿2014/11/30 07:48
総合スコア19
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/03 12:31
2014/12/03 18:50
0
サイトのブランディングについての方針を決めることがまずは必要とおもいます。
サイトの雰囲気は、色、レイアウトに大きく左右されます。
検討事項例:
- ファビコンのデザイン (現状は設定されていない)
- 基本の色 (現状は黒と黄色)。
現状では、ページ左上のタイトルをクリックしたときに現れるホームページの色調と一致していない...
- フォント、画面の基本構造
フォントサイズや色も ホームページのものと一致していない...
画面構成 (ナビゲーション、リンクの区分レイアウト、列挙のレイアウト...) も一致していない。
まずは、ホームページのものと合わせることが必要なのかを決定することが必要です。
(大抵は一致させるのが好ましいはずです。)
一致させる必要がないなら、それなりにデザインをすることが必要です。
デザイナーと協力して作業するべきです。
ブラウザの開発ツールなどをつかって, css, html, javascript でのエラーが発生していないことのチェックも必要です。
(現状では chrom での開発ツールのコンソールにいくつかエラーが表示されるようです)
投稿2014/11/24 10:59
総合スコア22324
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/03 15:07