iPhoneでは以下ような表示になり、本文が読みにくいため、画面幅に依らないレイアウトまたはレスポンシブデザインにする

#42 を受けての実装です。

• 横スクロールを禁止する
• ホバー/タップアクションでの団体名表示
• 表示フィルタの実装

（フィルタのUIがありませんが #42 (comment) のプランCのような形を予定しています）

フッター内にaboutページリンクなど2つのリンクが存在しますが、(画像参照)

背景色とテキスト色のコントラストが非常に低く、WCAG基準を全くクリアしていません。

ということで、テキスト色自体は通常のテキスト色である黒(or濃いグレー)にした上で、リンクであることがわかるよう下線を付けることを提案します。

#73 のレビュー時に気づいていなかったのですが、トップページでサークル詳細情報を表示するモーダルについて、モーダル全域がhover対象となっていることで

以下の画像のこのサイトについて付近にカーソルを移動させると

このように上のサークルのモーダルが展開してしまい、このサイトについてがクリック不能となっています。

対処として、hoverの対象範囲をポスター画像のみに狭めるまたはフッター上のmarginを広げる
ことを提案します。

他の開発者にもContributeをお願いするにあたって、現状プラス以下の項目はドキュメント化した方がいいと思いました！

• 原稿提出〜サイトデプロイまでのデータフロー
• テストデータ、スキーマの詳細
  • テストデータは適当な画像の寄せ集めである旨
  • どんな情報がどういう形で格納されているか
• サイトデザインの参照先
  • XDのリンク？
• Issueの提出 or 引き受け、PR提出までのフロー
  • 今あるタスクはどこを参照すればいいのか？どうやって引き受ければ良いのか？
• 以上の項目を参照するためのエントリーポイント
  • 「ここを見れば得たい情報がわかる」場所（README or CONTRIBUTING？）

ポスター画像の端が切れている

インデント幅がCSS（4 spaces）とJS/JSX（2 spaces）でずれているので、統一すべきだと思われます。

README.md の Setup Guide に書かれている

$ gatsby develop

はgatsbyがグローバルにインストールされていない限り動作しないので、

$ npx gatsby develop
# or
$ npm run develop

あたりに修正することを提案します

Contribution Guide の

このプロジェクトへの変更はIssueを前提としてください

は「PRはIssueに紐づいたものにしてください」の意図ですが、いまいち伝わりにくいので改善すべきだと思います。
（#32 で見逃しPRをいただいてしまったのを受けての提案です）

五三の桐は規定により10mm*10mmが最小サイズであるが、現状（ディスプレイに依存するが）、7mm~8mm角となっている

細かいことなんですけど、
フッターのここから筑波大公式HPに飛ぶようにしたら良さげな気もします。どうですかね？

あと、著作権のところなんですけど
https://nandemo-nobiru.com/om-6265
こういうサイトとか見る感じではサイト公開の年を年代のところに入れることが多いっぽいです。なのでnew Date.getYear()を使って最新の年代を取得せずに2020でいい気もします。

イメージ的には
これが

こうなる感じです。

現在Google Driveからのホストになっている

• データソース（Spreadsheets）からGraphQLストアへの取り込みの実装
• 画像の取り込み（&表示最適化）の実装

「このサイトについて」のページを作成する。

• 3系（体育系・文化系・芸術系）+その他（一般学生団体など）でそれぞれ表示できるようにする

#88 (comment) からの派生です。

問題点

• 新歓Webロゴと筑波大学ロゴが隣り合っており、そのサイズやデザインの視認性の差から、なんのサイトなのかわかりにくくなっている
• 意味的にも筑波大学ロゴがここに隣接している必要はない
  • 新歓Webロゴに「筑波大学」の要素を含めれば良い
  • （これを使うために大学広報室の認証があるため変更にも手間がかかりますが、個人的にはそこまでして置いておく意義はないと感じます）
• 正方形サイズのロゴをこの場所に置くのが適切とは言えない
  • 当初ファビコンって要求した（ #10 (comment) ）からこのロゴができたんやと思うんですけど、横長の場所に使うには微妙だと感じます
• そもそもこのヘッダーって必要……？🤔 ナビゲーション機能があるわけでもないのでもっとシンプルにできると思う

解決策

• A: ブランドシステムをもう少し作り込み、ロゴのバリエーションを増やすなどしてヘッダーに合わせる
• B: ヘッダーの位置、存在自体を再考する。
  • 一般的によくあるナビゲーションがないのでもっとシンプルな要素にできる気がします。
  • （ただし今後検索バーがこの場所に来る #17 可能性はあります）

問題点・解決策両方ともに、何かご意見があればお寄せください🙏

バッジに Imagine-the "Feature"って書いてる……🙇

新歓Webロゴを加える

アクセスが重くなりそうなら、再レンダリングの効率化はかるべき…？
http://blog.aqutras.com/entry/2016/06/23/210000
いや、keyなんぞいらんわ！ってなったら意見ください。(真面目にReactはチュートリアル回した事あるくらい&stdのサーバがどんな物か把握が甘いので何ともいえない)

DevToolにwarningめっちゃ出る。

現在のデザインプラン&実装ではトップページのサムネイルに団体名が表示されません。

ポスター画像のaltには団体名が入っていますが、これだとビジュアルブラウザーで閲覧した際には認識することができません。

ポスター画像のコンテンツは予測不能であり、スクリーンサイズの変化なども考えた場合に視認性を必ずしも担保できないため、画像下などにキャプションのテキストで団体名を入れるべきではないかと思いますが、いかがでしょうか。他の方の意見を聞きたいです。

現状テンプレートデフォルトのlayout.scssがリセットCSS的な働きをしていますが、#51 で言及の通りfont-familyをオーバーライドするなど問題が多いため、一般に提供されている別のメジャーなリセットCSSに入れ替えるのが良いかと思います。

導入するリセットCSSですが、余白のリセット**やモバイルに対応していることなどを考慮し sanitize.css が良いのではないかと思います。問題なければ導入しますので、アサインしていただいて構いません。他のリセットCSSのほうが良いなどあればご提案ください。

現在、筑波大学のロゴと「新歓Web」がh1タグで囲まれている状態だが、SEOの観点やh1タグの本質から好ましくない。
各コンテンツを表すものをh1タグとして使う。

Contribution Guideの一番上にある以下の記述はalphaリリース前の記述の消し忘れです……

ただいま、alphaバージョンのリリースまでの開発作業をおこなっています。
みなさまにご協力をお願いする段階になりましたら、Twitter (@tsukuba_shinkan)でお知らせいたします。もうしばらくお待ちください。

ポスター画像の代替テキスト（alt）にname（organizationName）が入っている箇所が複数ありますが、altは画像内容を置き換えるものであるべきであり、この要件に照らして、団体名を挿入することは相応しくないのではないでしょうか？

• トップページ （ほか2種）
• 個別ページ

現状アップされた画像は全てGdriveからホストされているが、本番環境でGoogleに頼りきりなのもどうなのか。
ということでインポートしてS3あたりに放り込むスクリプトを作った方がいいと思います。

https://github.com/tsukuba-shinkan/shinkan-web/blame/master/CONTRIBUTING.md#L29

upstreamに変更が加えられた場合は以下のようにしてローカルに変更を反映させてください。（毎作業ごとに行うことを推奨します。）

これ、upstreamに変更がある際、作業ブランチに毎回取り込むべきだというふうに読めますが、多分作業ブランチを切る前に取り込んだ後は、PRを送るまではそのままでいいように思われます。（修正の必要ありますか？）

（また、そもそも作業ブランチを切る手順も書いてないので、これくらい丁寧に書いてあげるならついでに切り方も書いてあげたほうがいいような気がしました！手順は個人の好みなのでなくてもいいかもですけど）

全てのスタイルシートがglobal.cssに書かれている状態ですが、このまま進めるとこのファイルが肥大し見通しが悪くなるのが明らかなため、ページまたはコンポーネントごとに名前空間を作って切り分けることを提案します。

2020年3月31日現在
Gatsbyのスターターにより生成されるテンプレートに存在していたファイルが残っている．
(e.g., src/images/gatsby-astronaut.png , src/pages/page-2.js )
クリティカルな問題はないが，開発時に不必要なため削除するとよい．

Updated

最新の仕様設定は #17 (comment) にあります。

• 画面内の配置はデザイン案を対象
• クエリ文字列全体の部分一致を探す
• 検索対象カラムはname / activityIntroduce / website / twitter / instagram

stbサーバにデプロイするためのActionを作成する

eslintrcでno-consoleが指定されておらず、console.logなどの出力を消し忘れたままでもLintが通ってしまう。

• gatsby-imageの導入を念頭に考えています。

global.scssの冒頭でNoto Sans JPがGoogle Fontsからインポートされており、全称セレクタにfont-family: 'Noto Sans JP', sans-serif;が指定されていますので、基本的にはサイト内の全テキストをNoto Sans JPに統一する意図があるのだと思います。
しかし現状トップページ/サークル個別ページの多くのテキストにはNotoが当たっておらず、sans-serifにフォールバックされています。
これはlayout.scssがh1~h6などの(全称セレクタより優先度の高い)セレクタにfont-familyを指定しているためであり、不要(というか邪魔)な記述なため削るべきではないかと思います。

本番用データが30件近く集まったのでそろそろ切り替えをお願いしたいです。

現状本プロジェクトでは生のCSSで全てのスタイルが記述されていますが、今後レスポンシブ化してモバイルに対応させることを考えると、メディアクエリを Mixin として扱える CSS プリプロセッサ(Sass など)の採用が賢明ではないかと考えます。
導入をご検討いただければ幸いです。

otherImageがない投稿は崩れます。直し方・やってくれる人募集

現在横並びレイアウトの多くがfloatで記述されていますが、レンダリングパフォーマンスは圧倒的にflexboxの方が良好(出典)であり、解除の手間がないこと、デザイン案に沿ってピクセルパーフェクトを目指しているわけではないことなどを考えるとflexboxに置き換えるべきではないかと思います。
ブラウザサポートも問題ないと思われます。

現状トップページでは体育系/文化系などのカテゴライズの上、それぞれが横スクロール可能な領域としてデザインされていますが、このUIには課題が多いと感じます。
これを再考していただきたいというのが趣旨です。

1. サークルを探す新入生は、初めから特定のカテゴリに絞って探しているとは限らない
2. PCからアクセスした際、マウススクロールでは横スクロールができない
3. そもそもポスターの画像は一見して情報が伝わりやすいオブジェクトではなく、一覧表示してもサークルを探す手助けになるとは考えづらい

1. について

デフォルトでは全サークルを表示させ、必要に応じてカテゴリーでフィルタリングできるUIの方が自然かなあと思います。XDでとりあえず組んでみたイメージです。

2. について

チルトシフトのないマウスではスクロールバーのドラッグ以外にスクロールする術がないため、順番にサークルを見て探す際にはかなり不自然な操作になってしまうと思われます。
メディアクエリを見て、PC判定の場合はスクロールイベントをpreventDefaultして横スクロールさせることで、マウススクロールでも横スクロールができるような実装が必要ではないかと思います。

3. について

かなり根本的な変更提案となってしまいますが、そもそもトップページに表示すべきはポスター画像ではなくサークル名のみなのではないかと思います。
トップページはサークルを一覧するためのものであり、単体でスペースを専有するポスター画像はその一覧性を大きく落とすものです。
ポスターに掲載されている内容は個別サークルの詳細情報として個別ページで見られる状態にすべきではないでしょうか。
こちらもXDで組んでみたイメージです。

ご検討ください。
念のためXDのリンクも置いておきます。
https://xd.adobe.com/view/e0d2fcbd-5ecd-4f97-56e5-6649628f28ad-96e3/

概要

はじめまして、
@asagatto777 さんのUI作成に合わせたほうがいいかもしれませんが、提案も兼ねてサークル紹介ページ（単体ページ?）のデザイン案を作成しました。説明用なのでこのデザインは使わなくてもいいです。

変更点

• デスクトップにて一画面表示にする必要はないと思いました。なぜなら、ポスターとほぼ同じ内容が並列に表示されているとかえって見にくくなると思うからと、webなら縦スライドを中心のデザインが向いていると考えられるからです。
• なので、flex表示を縦方向に変更しました。
• 外部へのリンクはコンテンツ末尾のほうが、UXが高いと思います。（普通なら説明をすべて読んだ後にクリックするため）
• 活動種別を追加
• imageUrlsが複数ある場合に対応

その他のデザイン(画像ダウンロードやシェアボタン)は仮置きなので、ご意見お願いします。
ちなみに参考はdribbble.comです。

触るファイル

src/templates/PostTemplate.js
どこかしらにscssファイルを生成する。
コンポネントを生成する可能性も。

備考

デザインが確定後、自分にアサインしてもらっても大丈夫です。
今回Xd環境が身近になかったので、figmaで作成しました。（すみません）
https://www.figma.com/file/UlWwvkECgva55Y4Qm3yrQA/web_shinkan_ehika?node-id=7%3A29

誤操作ですごめんなさい

src/components/Fluid180,js -> src/components/Fluid180.js

#64 でのレビュー漏れです。一度気づいたのに他の検証に気を取られて流してしまいました……ごめんなさい……

画像にalt属性があったものがいつの間にか消えています……。gatsby-imageを呼び出すコンポーネントでもプロパティ自体が設定されていないため、そもそも値を渡すことができません。

package.jsonのname / author / descriptionなど、スターターテンプレートの情報が残っています
https://github.com/tsukuba-shinkan/shinkan-web/blob/master/package.json#L2

画像アスペクト比の違いがあると親要素liの縦方向のズレが発生するよう

大学ロゴは使えないので何らかの何かを用意

現状スタイルがjsx内にもstyle={{}}の形で各所に記述されています。

例:

メンテコストを考えるとスタイルは全てスタイルシートに記述されているべきですので、これらをSCSSファイル(スタイルシート)内の当該箇所に移動することを提案します。