Skip to content

[WIP]追従型のヘッダーの追加 #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
AnaTofuZ wants to merge 5 commits into from
Closed

[WIP]追従型のヘッダーの追加 #304

AnaTofuZ wants to merge 5 commits into from
+144 −96

Conversation

@AnaTofuZ
Copy link
Member

@AnaTofuZ AnaTofuZ commented Mar 22, 2018 •
edited
Loading

関連issue

#294

行うこと

  • レイアウトを合わせたヘッダーの追加
  • show.html.haml の各要素にidを振る
  • idを降った各リンク先への以降を書く

リンク先について

現在 show.html.haml にはidが振られていないのでidを振りながらリンクを書きます
リンク先は以下の通りです

  • はじめに(About?)
  • 全国の道場
  • 最近の話題
  • もっと詳しく知りたい
  • パートナー
  • メール購読フォーム
  • お問い合わせ

@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch from 70fb792 to 04a5ff4 Compare March 22, 2018 04:22
@AnaTofuZ AnaTofuZ changed the title [WIP]追従型のヘッダーの追加 追従型のヘッダーの追加 Mar 22, 2018
@AnaTofuZ AnaTofuZ requested review from nalabjp and yasulab March 22, 2018 04:26
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

ヘッダーを追加してみました
screen shot 2018-03-22 at 13 27 07

@nalabjp
Copy link
Member

nalabjp commented Mar 22, 2018

不要なコミットが3つ付いているようなのでrebaseしてもらっても良いでしょうか〜？😌

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

今気づきましたΣ(ﾟДﾟ)　
rebaseしておきます

@AnaTofuZ
ナビゲーションバーを追加
92a29b9 
/kataとレイアウトを合わせるほうが統一性があると考えた為
plain_page/index.html.hamlから該当する部分を移行した

またshow.html.hamlからrenderするように修正した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch from 04a5ff4 to 5e421d6 Compare March 22, 2018 04:43
@nalabjp
Copy link
Member

nalabjp commented Mar 22, 2018

ファイル名_home_narbar.html.hamlの略称がちょっとわからないです😅
ナビゲーションバーとコミットログにあるのでnavbarのtypoだったりしますか？

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

過去のcommitをdropしてみました

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

@nalabjp navbar のtypoですね… renderしている箇所とファイル名を修正してみます

@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch from 5e421d6 to a4c5abc Compare March 22, 2018 04:48
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

ファイル名を修正しました!

@nalabjp
Copy link
Member

nalabjp commented Mar 22, 2018

s/home_narvbar/home_navbar/？🤔
焦らないで〜☺️

@AnaTofuZ AnaTofuZ changed the title 追従型のヘッダーの追加 [WIP]追従型のヘッダーの追加 Mar 22, 2018
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

ご指摘ありがとうございます!　落ち着きがない…

@AnaTofuZ
リンク用に各sectionにidを追加した
2d78869 
バーのリンク先としてそれぞれのidが必要となった為に
各sectionに対してidを追加した
またそれに対応する形でリンクを列挙した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch from a4c5abc to 2d78869 Compare March 22, 2018 04:58
@AnaTofuZ AnaTofuZ changed the title [WIP]追従型のヘッダーの追加 追従型のヘッダーの追加 Mar 22, 2018
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

これで多分治りました!

nalabjp
nalabjp approved these changes Mar 22, 2018
View reviewed changes
Copy link
Member

@nalabjp nalabjp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@yasulab
Copy link
Member

yasulab commented Mar 22, 2018

@AnaTofuZ あ、ヘッダーの配色について詳細を伝えきれていらずすみません >< 💦

CoderDojo Japan のテーマカラーが青なので、ヘッダーとしてはこっちの方がテーマカラー的にも相性が良さそうです🤔
http://news.coderdojo.jp/

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 22, 2018

なるほどです! newsの実装を確認したいのでそちらを調査します

@yasulab
Copy link
Member

yasulab commented Mar 22, 2018

別 Issue になると思いますが、同様の理由で (配色とテーマカラーの相性から) Kata のヘッダーもこちらに合わせられると良さそうです🤔💭
http://news.coderdojo.jp/

@AnaTofuZ AnaTofuZ changed the title 追従型のヘッダーの追加 [WIP]追従型のヘッダーの追加 Mar 23, 2018
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

フォントなども合わせたほうが良いかななどと思っていますが、とりあえず色を合わせるように修正してみます

@yasulab
Copy link
Member

yasulab commented Mar 23, 2018

フォントなども合わせたほうが良いかな

確かに...!! フォントも合わせた方が良さそうですね! 😸

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

ただnewsで定義されているCSSがあまり良く見えないんですよね…💦
ChromeのInspectあたりを使って見てみています

@AnaTofuZ
cssを追加して背景色と文字色を修正した
f83f8fc 
CoderDojoのテーマカラーの青色に統一出来るようにバーのcssを修正した。
また文字の大きさを微調整した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch from 1b61dab to f83f8fc Compare March 23, 2018 02:01
@AnaTofuZ AnaTofuZ changed the title [WIP]追従型のヘッダーの追加 追従型のヘッダーの追加 Mar 23, 2018
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

フォントは調べているのですが、背景色と文字色及び文字の大きさをnewsのバーのようにしてみました

screen shot 2018-03-23 at 11 01 06

@AnaTofuZ AnaTofuZ changed the title 追従型のヘッダーの追加 [WIP]追従型のヘッダーの追加 Mar 23, 2018
@AnaTofuZ
CoderDojoJapanのロゴを追加
dc5333c 
news.coderdojoと合わせるためにロゴを追加した
@AnaTofuZ AnaTofuZ changed the title [WIP]追従型のヘッダーの追加 追従型のヘッダーの追加 Mar 23, 2018
@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

フォントはちょっと調整が難しかったので一旦画像を挿入してレイアウトだけを同じにしてみました!
確認お願いします @yasulab @nalabjp
screen shot 2018-03-23 at 13 13 18

@yasulab
Copy link
Member

yasulab commented Mar 23, 2018 •
edited
Loading

@AnaTofuZ 確認しました! 指摘箇所が多くて恐縮ですが、以下、気づいた点を共有していきますね >< 💦

screen shot 2018-03-23 at 13 25 02

screen shot 2018-03-23 at 13 25 34

  1. 「目次」の配色のコントラストが弱い (なんで灰色にしたんだろう?)
  2. 「目次」のヘッダーが縦幅を使いすぎている (横に並べればロゴ画像の縦幅内に収まりそう?)
  3. トップページにロゴとヘッダーのロゴが２つ並んだり、重なったりしていると違和感がある🤔
    • Eye-Catch 画像の領域 (青色の領域) が表示されなくなったらヘッダーを表示する方が自然?

一度にたくさん指摘するとちょっと混乱するかもなので、とりあえず僕が大きく気になったところだけ書いておきますね ><

モバイル版も含め、それぞれの Responsive レイアウトをすべてチェックした方が良さそう 🤔💭

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

確認ありがとうございます!
目次の部分の文字色は確認ミスでした(｀；ω；´)

確かに2つあると不自然と言えば不自然ですね…無くして「CoderDojoJapan」だけの表記でも良いかなとは思っているのですが,フェードイン出来る感じで実装できないか調べてみます

@yasulab
Copy link
Member

yasulab commented Mar 23, 2018 •
edited
Loading

恐らく上記のデザイン修正するだけでなくて、デザインそのものの学習をする必要がありそうなので、実際にはそこそこ工数がかかりそう (少なくとも１週間ぐらいはかかりそう) かなと考えています🤔なので、もしあまりデザインに興味がなかったら、別の Issue をやってもらった方が良いかもしれないです 🙏

逆に、もしデザインについて興味がある場合は、良いミニプロジェクトになると思います ;)

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

なるほどです! デザインあまり良くわかってないですが、折角なのでやってみたいと思います。
学習する必要がありそうな箇所というとCSS周りと見やすいデザインみたいな話でしょうか? 🤔

@yasulab
Copy link
Member

yasulab commented Mar 23, 2018

CSS周りと見やすいデザインみたいな話

ですね! 例えばこういった本を読んでからの方が良いかもしれないです🤔

ノンデザイナーズ・デザインブック [第4版]

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

ありがとうございます! 探す or 買うで読んでみたいと思います

@AnaTofuZ AnaTofuZ changed the title 追従型のヘッダーの追加 [WIP]追従型のヘッダーの追加 Mar 23, 2018
@nalabjp
Copy link
Member

nalabjp commented Mar 23, 2018

👀 （デザインは得意ではないので見てるだけ）

@yasulab
Copy link
Member

yasulab commented Mar 23, 2018 •
edited
Loading

@AnaTofuZ 書きました ;)

デザインを学ぶためのガイドライン - Qiita:Team
https://yasslab.qiita.com/yasulab/items/779b17a8d9204d760b89

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 23, 2018

ありがとうございます!!!すごい分量…!! 🙏 🙏
読んでみます 👍

@AnaTofuZ
Copy link
Member Author

AnaTofuZ commented Mar 26, 2018

ちょっと内容が難し目なので一旦凍結します 🍨

@yasulab
Copy link
Member

yasulab commented Mar 26, 2018

ちょっと内容が難し目なので一旦凍結します 🍨

補足です。先ほど @AnaTofuZ さんと相談していて、次の理由からデザイン系のタスク (中でも特にトップページの変更) を完了させるのが現時点では難しそうなので、まずは周辺環境を整えてから改めて着手することにしました ✅

  1. 現状のデザインに至った背景や文脈がドキュメント化されていない
    • なぜ現状ではこのデザインなのか?
    • どういった効果を狙っているのか?
  2. 新しいデザインを試みる前に、新しいデザインを評価する仕組みが必要
    • 何のために新しいデザインにするのか?
    • それは本当に価値がある改善といえるのか?
  3. 現在は評価方法が明確ではないので、新しいデザインを適用してもそれが良いのか悪いのかが判断できない
    • 改善したつもりが改悪だった、というケースもありうる
    • まずは「何を重視しているのか?」「何のために修正しているのか?」といった目的のドキュメント化や、その目的に近づいているのかどうかを定性的または定量的に評価する仕組みが必要

統計情報ページなど、トップページ以外のデザインについては比較的楽に修正できそうですが、とはいえ上記の点を明確にしてから着手した方がベターかなと考えています🤔💭

yasulab
yasulab requested changes Mar 26, 2018
View reviewed changes
Copy link
Member

@yasulab yasulab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

周辺環境が整うまで一旦 lock しますね 🔐
cf. #304 (comment)

@yasulab yasulab added デザイン Improve UI/UX by Design. 設計・議論 Topics to discuss for better business. labels Mar 29, 2018
@yasulab
Copy link
Member

yasulab commented Jun 8, 2020 •
edited
Loading

#843 の PR で対応されたので本 PR は Close しちゃいますね 😉 ✨
対応ありがとうございました！！(＞人＜ )💖

@yasulab yasulab closed this Jun 8, 2020
@yasulab yasulab deleted the add_hader_for_home branch June 8, 2020 07:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yasulab yasulab yasulab requested changes

@nalabjp nalabjp nalabjp approved these changes

Assignees

No one assigned

Labels

デザイン Improve UI/UX by Design. 設計・議論 Topics to discuss for better business.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@AnaTofuZ @nalabjp @yasulab