制作中サイトのアドバイスをお願いします

http://one-text.tk/template/

上記サイトをHTML5で制作しました。

HTML5 や CSS のかきかたで改善した方が良い点がありましたら教えてください。

また、デザインなどについての意見もお願いします。

行動規範の内容に同意します

回答9件

こういった、フロントの制作物を見てレビューしてもらうっていう使い方も素敵ですね！
みなさますごく具体的かつ的確なご回答で素晴らしいです。
デザイナーの視点でコメントしてみます！

■ユーザビリティを考慮するなら、このサイトの
画面右上のハンバーガーメニュー格納は必要無いと感じました。
なぜなら、ナビゲーションが3つしかないのでヘッダー内に格納してあげたほうが一覧性が良いからです。
また、スマホで見た場合でも3つなら入るだろう、と感じました。
ナビゲーションが増えてきたら、使えるUIですよね！

■雪（？）が降っているのがとても気になりました…。
技術的にはとてもすごいと思うのですが、やはり情報を読み取りづらいと感じてしまいました。
こういったアニメーション技術は、「注目させたい」場所（例えばサービスの特徴を表すメインビジュアル部分など）に使用するととても効果的だと思います！

■テキストリンクの色は、基本的に大体がデフォルトである青色にしたほうがリンクであることを認識しやすいと思います！

■メインカラムの見出しレベル　＞　サイドカラムの見出しレベル
であることが一般的であると思います。
リボンの見出しスタイルをメインに使用して、サイトカラムの見出しは下線にするなど装飾を弱めた方がコンテンツの強弱がついて、ユーザーに伝えたい情報に優先順位がつけられます！

とても有意義な質疑応答ですね！
頑張ってください！

投稿2014/12/03 13:42

hirai0110

総合スコア240

pac894398

2014/12/03 15:07

◆メニューについて実際に運用するときにはメニュー数は増えるのでこのままいきたいと思います。 ◆雪についてやはり、ホームページは情報の伝達性が第一にあると思うので今回は消したいと思います。年明けのカウントダウンページなどに使うのもよさそうですね。 ◆リンク色ヘッダーフッター内ではリンク色を青にすると背景色が黒で見づらいということ、デザイン性が落ちることから下線を追加してみました。記事内では青色のリンク色を使っていこうと思いまう。 ◆見出しメインの方の装飾を強めに変更してみました。スマホからのアクセス時もメインコンテンツとサブコンテンツの区別がついてよくなりました。今回はよいご指摘をありがとうございました。

行動規範の内容に同意します

HTML
h1タグはサイトのタイトルに使った方がいい。サイトの顔は目立たせないと。
記事タイトルはh2からで充分。サイズが足りなければスタイル上書き

CSS
フォントサイズの単位の指定が混在してる。remとかで統一したほうが後々楽。　
transitionプロパティはallにするよりtransitionをかけるプロパティを指定する方がいい。
色の指定で色名とhexが混在している。hexも3桁6桁が混在しているため統一

デザイン
サイドバー表示のボタンの位置は左側の方がいいんじゃないかな？
footerがブラウザ下部から浮いて見えてしまう可能性。html要素にbackground-color:#000000しとくといいかも。

ぱっと見こんなところでしょうか

投稿2014/11/29 19:45

Ryo

総合スコア507

pac894398

2014/12/03 14:47

h1 h2 ダグは修正させていただきました。ご指摘ありがとうございました。メニューボタン・フッターについては試行錯誤してみます。

行動規範の内容に同意します

デザイン:
メニューを表示するためのボタンが右過ぎる気がする。押しにくかった。
パンくずリストで、色がすべて一緒になっているが、自分の現在位置以外の色を替えるとかしたほうがよりわかりやすい。

コード:

<script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>が効いてないのではないか？という疑問。リンクを押したら、Forbiddenと表示されているので、無駄なコードは消したほうがよい。
表示速度の観点から言うと、javascriptのソースコードは一番下に記述するほうが良い。

投稿2014/11/24 07:52

takehiro_pink

総合スコア23

pac894398

2014/11/24 08:36

ありがとうございます！ JSの方は正しく表示されるときされない時があるようです。外部サーバーではなく内部サーバーにし、一番下に記述したいと思います

行動規範の内容に同意します

ベストアンサー

こういう相談って、ありそうでなかったですね。
新しい利用方法だと思います。　不躾ながら言いたいこと言わせて頂きます。
■デザイン
・右上のメニュー呼び出しボタンがある場合、スライドメニューが出るのは右からがいいと思います。
（ボタンが右にあるなら右からスライドするのが直感的な為。）
・右上メニューを付けるならば、大きくして視認性を高めた方がいい。
・<aside>と<article>の1つ目のタイトルのタイトル背景（黒背景部分）の上位置を合わせたほうが良い。
・各ブロックの余白がなく圧迫感があるので、余白をもう少し多く取ったほうが良い
・フッターを下固定にさせた方がスッキリ見えそう。

■コード
・リンク先の無い<a>タグのhrefには「href="javascript:void(0)"」を付けるか、コメントアウトしておけばいい。
・フッターのコピーライトにある「(c)」は実体参照文字を使った方がいい？

頑張ってください。

投稿2014/12/03 18:47

ebonawake

総合スコア44

スマホとpcで共用ならwidthとheightを%、autoなどにすると良いのではないでしょうか？
幅の固定はスマホでは見えにくいです
回答ではないのですが、
もしモバイルとpc別で作るなら.htaccessやユーザーエージェントで判別すると良いと思います

投稿2014/12/02 12:37

退会済みユーザー

総合スコア0

pac894398

2014/12/03 08:24

レスポンシブデザインに対応化させてみました。よいご指摘をありがとうございました。

行動規範の内容に同意します

他の方もおっしゃっていますが、個人的にはフッターが浮いてしまっている（フッターの下に無駄なスペースがある）のが気になります。

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

toppo

総合スコア19

pac894398

2014/12/03 12:31

position: absolute; の指定をすると... メインコンテンツが画面下まであるとき(ウィンドウの高さが狭いとき)にフッターのバーがメインコンテンツの上に出てきてしまいました。対処方法を教えてください。お手数ですが、お願いします。

ebonawake

2014/12/03 18:50

footer.jsを利用するか、以下urlを参考に。 http://webnonotes.com/css/footer/

行動規範の内容に同意します

サイトのブランディングについての方針を決めることがまずは必要とおもいます。
サイトの雰囲気は、色、レイアウトに大きく左右されます。

検討事項例：

ファビコンのデザイン (現状は設定されていない)
基本の色 (現状は黒と黄色)。
現状では、ページ左上のタイトルをクリックしたときに現れるホームページの色調と一致していない...
フォント、画面の基本構造
フォントサイズや色もホームページのものと一致していない...
画面構成 (ナビゲーション、リンクの区分レイアウト、列挙のレイアウト...) も一致していない。

まずは、ホームページのものと合わせることが必要なのかを決定することが必要です。
(大抵は一致させるのが好ましいはずです。)
一致させる必要がないなら、それなりにデザインをすることが必要です。
デザイナーと協力して作業するべきです。

ブラウザの開発ツールなどをつかって, css, html, javascript でのエラーが発生していないことのチェックも必要です。
(現状では chrom での開発ツールのコンソールにいくつかエラーが表示されるようです)

投稿2014/11/24 10:59