審査結果をWebサイト上で確認できるようにする。

[shumpei]

審査結果（受賞作品）をWebサイト上で確認できるようにします。
とりあえず適当に仕様を考えてみます。

• 最優秀賞、優秀賞についてはトップページで確認できる
• その他（協賛企業など）を含む全審査結果については、専用の一覧ページで全て確認が可能
• 各受賞結果については、それぞれ専用のページが割り当てられる（個別のURLがあったほうが、受賞者も自己紹介などに使いやすい）

上のように作りこむことを考えると、DBにデータ登録して動的にページ作るほうが良さそう。

内部設計の案

賞データと応募作品データの間に関連テーブルを用意して、賞:応募作品のマッピングを実現するとか。

一つの応募作品が複数の賞を受賞することも考えられるので、賞と作品はmany to one関連になると思われます。

UI上の設計案

現在のWebサイトに、以下の様な修正を加える

• トップページの目立つ箇所（一番上、くらいでもいいかもしれない）に、最優秀賞と優秀賞が目立つように表示される。
• 「/winners」で、全受賞作品を閲覧できるページが表示される。このページは、「審査結果」として、グロナビからもリンクを貼る（グロナビそろそろキツキツなので、他のメニューをどこかに追いやりたい）
• 「/winners/<賞slug>」で各賞とそれに紐付いた作品が表示される（例: 「/winners/kddi」でKDDIの受賞作品が表示される）。そのページでは、賞の概要と作品の概要が分かる程度でよく、詳細情報については賞のページ、作品のページ、それぞれにリンクする

ほか、細かい点

• 最優秀賞と優秀賞は、賞のslugがないので、最優秀賞は「highest」、優秀賞3作品は「high1-3」とする。
• トップページ、作品とは別に、ファイナルイベントでトロフィー受け取ってる写真とか掲載してもいいかもしれない。「このコンテストは終了したよ」と「盛り上がったよ」というメッセージを発信したい。

だいぶ荒い仕様ですが、まずはこれを基点に進めさせて頂ければと思います。
内部的な設計は白石と組長で、デザイン的なところは竹本さんにまずはお任せしますので、疑問や相談はどうぞご遠慮なく！

よろしくお願いします。

[shumpei]

とりあえずステージング環境で、審査結果が表示されるようにはしてみました。
まず、トップページの上部に、優秀賞以上の作品が載っています。
http://html5jcup.herokuapp.com/

また、グロナビの「受賞作品」などから辿れる一覧ページを作りました。
http://html5jcup.herokuapp.com/winners

「もっと詳しく」を押すと、ダイアログが表示されて詳細を確認できます。

竹本さんにお願いしたいことは、これらのデザインを起こしていただくことです。
とりあえずデザインカンプなどさえあれば、マークアップやスタイルの調整はぼくの方でもできるかな、と思っています。

その際、考慮していただきたい点としては、

• 最優秀賞、優秀賞、審査員特別賞、プラチナ、ゴールド、シルバー、後援など、賞のカテゴリーに応じて見栄えが変わると良い。（トップページにあるカップのイメージとか、使えそうですね）現在は、色で分けてます。
  
• 協賛企業賞については、スポンサーランク順で並べています。（プラチナが先頭）
• 現在のスタイルに引きずられる必要はありません。

とりあえずこんなところです。何か質問とかご意見とかあったら遠慮なく！
よろしくお願いします。

[namikuguri]

@shumpei
審査結果の作成、ありがとうございました！

こちら了解です。
では、デザインを僕の方で行っていきますね。今日の夜か、週末作業に入ろうと思ってます。

最優秀賞、優秀賞、審査員特別賞、プラチナ、ゴールド、シルバー、後援など、賞のカテゴリーに応じて見栄えが変わると良い。

このへんはアイコンとかで区別出来たほうが良いかもしれませんね。

デザインが出来たタイミングでまたコメント投げますね！
よろしくお願いします。

[namikuguri]

@shumpei
トップページに載せる受賞作品エリア、受賞作品一覧ページのデザインを作りましたので一度ご確認ください。 @ega1979 さんも是非！

最優秀賞、優秀賞、審査員特別賞、スポンサー賞（部門賞）では、タイトル上に出すアイコン（ 下から2番目のトロフィーとかのアイコン画像です ）で見た目を分けています。
プラチナ、ゴールド、シルバー、後援などのスポンサーランクは、提供団体名の横にアイコン（ 一番下の人のアイコンが並んでる画像です。 ）を付ける形で分けています。ここは、スポンサーランクをあまり意識してないであろうサイト閲覧者からの視点で考えると、見栄えを大きく変えて情報を分けるべきでは無いと思いました。このランクで賞の内容自体に区別は無いため、最小限のスタイルで区別をつけるようにしました。

受賞作品の発表ページとしての全体的な見栄えであるとか、コンテンツの意味として配置が的確であるかなどを確認して頂ければと思います。
よろしくお願いします！

[namikuguri]

@shumpei @ega1979
トップページに載せる受賞作品エリア、コンテンツが受賞作品であることを示す見出しが無かったですね... 。

見出しつけたので、トップページのデザインはこちらでご確認ください。
よろしくです！

[ega1979]

さすが、早いですね！

僕がざっと見たFBを以下に添付しますね、
（はっきり言って細かいですがw）

最優秀賞が「ドーン！」という感じにしたいですね。

僕も自分のタスク頑張らねば！

[namikuguri]

@ega1979
いつも丁寧に内容を伝えて下さり、ありがとうございます！

頂いた指摘内容はすべて納得したので、こちらは修正します。
（というかスペースのバランスが異なるのは僕の不注意ですね.. すみません）

日中は外にでるので、修正して再度コメントを投げるのが夜になりそうです。
よろしくお願いします。

[namikuguri]

@shumpei @ega1979
両ページ共に頂いた内容で修正してみましたので、またお時間のあるときにご確認お願いしますー。
優秀賞のトロフィーは、色を明るくしてみることで対応してみました。

[shumpei]

@thleap すいません、お返事遅くなりました！

お休み中にもかかわらず、作業ありがとうございます！！
では、頂いたデザインを元に、マークアップやスタイリングを進めていこうと思います。

幾つか、細かいことだけ確認しますと、

• スポンサー賞の名前にリンクを貼りたい（リンク先は賞の詳細情報）のですが、頂いたデザインの賞の部分をリンクにしてしまっていいですか？その際のスタイルですが、リンク色＆下線が入ってもいいでしょうか？（一見してリンクとわかるようにしたい）
• 各スポンサーの前にアイコンらしきものがありますが、これ、協賛企業のアイコンでいいでしょうか？それとも、スポンサーランクを表す固定画像というイメージでしょうか？（ただ、リサイズして企業アイコン作る時間がないかも・・）
• 「もっと詳しく」ボタン、他のページでも使っているので（例えばこのページ）、できればスタイルを合わせたい気もしますが・・・このデザインに入れ込むと無理ありそうですよね？（確認）
• 元になった、PhotoShopのファイルをいただけますか？あと、画像素材として必要になりそうな部分だけ、スライスしておいていただけると嬉しいですm(_ _)m

とりあえず、できるところから進めちゃおうと思ってます。よろしくお願いします！

[ega1979]

@thleap 修正ありがとうございます！ばっちりです！

[shumpei]

@thleap あ、カップの画像素材は、既に切り出して頂けてたんですね。ありがとうございます！こちら、使わせていただきます。

[namikuguri]

@shumpei

頂いた内容を上から順にお答えさせていただきますね。

スポンサー賞の名前にリンクを貼りたい

リンクを貼って頂いて構いません。スタイルもリンクとしてわかりやすいように下線、色の変更をお願いします。

協賛企業のアイコンでいいでしょうか？それとも、スポンサーランクを表す固定画像というイメージでしょうか？

ここは固定画像のイメージです。「企業、団体から提供された賞」であることを表そうとして作りました。スポンサーランクとは関係ありません。

「もっと詳しく」ボタン、他のページでも使っているので（例えばこのページ）、できればスタイルを合わせたい気もします

これは他のページと合したほうが良さそうですね。ボタンのアイコンだけ、他のリンクを押した時の動作とは異なるので、今デザイン案で出してるものにしたいと思います。

元になった、PhotoShopのファイルをいただけますか？

画像素材として必要になりそうな部分だけ、スライスしておいていただけると嬉しいです

今回デザインを Fireworks で作成したので.. 、Fireworks png データと、この png を psd に変換したものをお渡しさせて頂ければと思います。
アイコンや背景となる部分はスライスしておきますね。

よろしくお願いします。

[shumpei]

@thleap

ご回答ありがとうございます。

今回デザインを Fireworks で作成したので.. 、Fireworks png データと、この png を psd に変換したものをお渡しさせて頂ければと思います。

あ、ほんとですか？
じゃあ、Fireworks png形式でも構わないですよー。
ぼく、Fireworks開けますので。

[namikuguri]

@shumpei
そうなんですね。助かりました。

じゃあ、png 形式で先にデザインデータを送らせていただきますね。このコメントに貼り付けた画像を落として使用してください。
ボタン部分は変更してるので、それも合わせて確認して頂ければと思います。

スライスは、この後行いますね。

[namikuguri]

@shumpei
スライス画像を添付して、白石さん宛にメールで送りました。
よろしくお願いします！