This is a cache of https://github.com/coderdojo-japan/coderdojo.jp/pull/304. It is a snapshot of the page at 2020-08-08T07:28:01.978+0000.
[WIP]追従型のヘッダーの<strong>追加</strong> by AnaTofuZ · Pull Request #304 · coderdojo-japan/coderdojo.jp · GitHub
Skip to content

/ coderdojo.jp

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.

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

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

Closed
wants to merge 5 commits into from
Closed

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

wants to merge 5 commits into from

Conversation

@AnaTofuZ
Copy link
Member

AnaTofuZ commented Mar 22, 2018 •
edited

関連issue

#294

行うこと

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

リンク先について

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

  • はじめに(About?)
  • 全国の道場
  • 最近の話題
  • もっと詳しく知りたい
  • パートナー
  • メール購読フォーム
  • お問い合わせ
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch Mar 22, 2018
@AnaTofuZ AnaTofuZ changed the title [WIP]追従型のヘッダーの追加 追従型のヘッダーの追加 Mar 22, 2018
@AnaTofuZ AnaTofuZ requested review from yasulab and nalabjp Mar 22, 2018
@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
ナビゲーションバーを追加
Verified
This commit was signed with a verified signature.
AnaTofuZ AnaTofuZ
GPG key ID: 4A3672920E21A8AE Learn about signing commits
92a29b9 
/kataとレイアウトを合わせるほうが統一性があると考えた為
plain_page/index.html.hamlから該当する部分を移行した

またshow.html.hamlからrenderするように修正した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch Mar 22, 2018
@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 Mar 22, 2018
@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を追加した
Verified
This commit was signed with a verified signature.
AnaTofuZ AnaTofuZ
GPG key ID: 4A3672920E21A8AE Learn about signing commits
Loading status checks…
2d78869 
バーのリンク先としてそれぞれのidが必要となった為に
各sectionに対してidを追加した
またそれに対応する形でリンクを列挙した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch to 2d78869 Mar 22, 2018
@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 changes
Copy link
Member

nalabjp left a comment

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を追加して背景色と文字色を修正した
Verified
This commit was signed with a verified signature.
AnaTofuZ AnaTofuZ
GPG key ID: 4A3672920E21A8AE Learn about signing commits
Loading status checks…
f83f8fc 
CoderDojoのテーマカラーの青色に統一出来るようにバーのcssを修正した。
また文字の大きさを微調整した
@AnaTofuZ AnaTofuZ force-pushed the add_hader_for_home branch to f83f8fc Mar 23, 2018
@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のロゴを追加
Verified
This commit was signed with a verified signature.
AnaTofuZ AnaTofuZ
GPG key ID: 4A3672920E21A8AE Learn about signing commits
Loading status checks…
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

@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

恐らく上記のデザイン修正するだけでなくて、デザインそのものの学習をする必要がありそうなので、実際にはそこそこ工数がかかりそう (少なくとも１週間ぐらいはかかりそう) かなと考えています🤔なので、もしあまりデザインに興味がなかったら、別の 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
「目次」の文字色の修正
Verified
This commit was signed with a verified signature.
AnaTofuZ AnaTofuZ
GPG key ID: 4A3672920E21A8AE Learn about signing commits
Loading status checks…
2de05e9
@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

@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 changes
Copy link
Member

yasulab left a comment

周辺環境が整うまで一旦 lock しますね 🔐
cf. #304 (comment)
@yasulab yasulab added this to ☃️Icebox (順不同) in coderdojo.jp 開発ボード Feb 11, 2019
@yasulab
Copy link
Member

yasulab commented Jun 8, 2020 •
edited

#843 の PR で対応されたので本 PR は Close しちゃいますね 😉 ✨
対応ありがとうございました！！(＞人＜ )💖
@yasulab yasulab closed this Jun 8, 2020
coderdojo.jp 開発ボード automation moved this from ☃️Icebox (順不同) to ✅Done Jun 8, 2020
@yasulab yasulab deleted the add_hader_for_home branch Jun 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yasulab yasulab

@nalabjp nalabjp

Assignees
No one assigned
Labels
デザイン 設計・議論
Projects
coderdojo.jp 開発ボード
  
✅Done
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
@AnaTofuZ @nalabjp @yasulab
You can’t perform that action at this time.