大学オンラインイベントページのレスポンシブサイトデザイン（＋可能なら別途費用コーディングまで）の仕事 [学術・研究]

依頼の募集内容

詳しい依頼の募集内容

依頼主の業種

学術・研究

概要・特徴

★現サイト情報や提供画像素材は参加を希望される方に個別にお知らせいたしますので、お気軽にご連絡ください。
提案者制限は行いませんが、
・本人確認の取れている方
・日中の迅速なご連絡が可能な方
・選定から11月末完成までの作業スケジュールに御対応頂ける方
・HTMLコーディングが可能、またはグラフィックだけでなく
　コーディングレベルの理解がある方
・提案者のポートフォリオに今回のイメージに近い作品がある方
を優先する場合があります。
---------
　大学の学部が毎年開催していたイベントが、今年度はウェブ上でのビデオ配信によるオンライン開催となりました。既存の古いCMSサイトが存在しますが、前述の事情もあり、今年度はビデオ配信に特化した形でデザインを一新して掲載する事になりました。
　コンテンツは比較的シンプルな内容となっていて、依頼させて頂くデザインパターンとしては、
●トップページ
●下層1～2パターン（但しカラーバリエーションあり）
について、それぞれレスポンシブを想定した形で２～３パターン（画像イメージとしてはスマホとPC想定で４～６画像程度）となります。

　サイトデザイン的に多少の遊びや目を引く動きを入れた形としたく、トップページについてはイラスト的な内容やパララックス的な動作、ポインタ操作によるアニメーションなどを含むデザインを想定しています。
　基本的にはグラフィックデザインとして募集し、コーディングは弊社にて実施する予定ですが、パララックスやアニメーションの動作を含めコーディングまでお願いできる場合は対価をお支払いする形でコーディングまでお願いしたいと思いますので、費用について別途お知らせください。
　グラフィックデザインだけでなく、現実的に実装できるかという点もポイントとなるので、コーディングまでお任せできるご提案が優先される場合があります。
　ご提案の方法については、静止画像、動作も含めた他の方法など、ご提案者にお任せいたします。
　クオリティ的には今回の要求以上のサンプルとなりますが、大まかには https://johnnys-shop.jp/s/j/page/merchmarket こちらのサイトのような内容をイメージしています。

★HTMLコーディングについて
　アニメーション的な動作も含めたコーディングまでお受け頂ける場合、その範囲の費用感もお示しください（DMでも提案文書に含める形でも構いません）。条件的に折り合いが付く場合は本件選定確定後、コーディング費用を加算してお支払いいたします。
　なお、スケジュールとしては選定確定後の1週間以内にデザイン修正が完了し、そこから2週間程度でコーディング完了。11月末には業務完了となるスケジュール感となっています（スケジュール厳守です）。

★その他
　過去の作品で開示可能なものがあれば選定の際の参考にさせて頂くようにします。

依頼詳細

★トップページについて
　トップページにはタイトルや２００文字程度のイベントの説明文、数行のお知らせ表示欄の他、下層に配置される各５学科のビデオ掲載ページと、学部PRページ（全体のPR動画・施設紹介動画・キャンパス紹介動画（３～４動画の予定）を掲載するページ）へ計6つのリンク要素を配置します。
　トップページ全体のキーカラーはスカイブルーが第１希望となります。
　５学科と学部PRページ（学部PR動画、施設紹介動画、キャンパス紹介動画等）の計6リンクについては、何らかのグラフィック要素のブロックとしてページ上に配置、マウスホバーやクリックやスクロールによる動作を実装することを想定していますので、これらの動作のアイデアや実際の動作を含めるようにしてください。
　内部的な当初案としては、廊下や通路の両サイドに教室（研究室）、または教室（研究室）のドアのようなイメージをリンクとして配置、マウスホバーによりドアが開いて、クリックするとリンク先に移動するといったものでしたが、絶対的なものではないので、最終的なデザインはお任せいたします。
　なお、当初案はイラスト的なイメージを想定していましたが、提供する写真素材や別途何らかの素材を使用してデザインされても問題ありません（提供以外の画像素材については出典、ライセンスが明確にできるもの、また費用についても事前にお示しください）。
　トップページについてはアニメーション的な動作のアイデア、動作についても選定のポイントいたしますが、大げさになりすぎない比較的シンプルな動きを希望しています。
　なお、参考としてあげた https://johnnys-shop.jp/s/j/page/merchmarket をベースに考えますと、店舗の部分がドアのイラストになるようなイメージとなります（ページトップにあるレイヤー的動作をするタイトル画像のような作り込みは今回は必要ありません）。

★各５学科のページについて
　全体のデザインとしては５学科共通となるので、ご提案のイメージとしては１つで問題ありません。なお、５学科にはそれぞれ指定のキーカラーがあるので、完成物としてはベースのデザインを元にした５つのカラーバリエーションページが出来上がることになります。
　当初案としては、ページの最上部に大きな学科紹介動画が１つ掲載され、その下に小さめのブロックで各研究室の紹介動画がZ状の配置でならぶイメージを想定していましたが、最終的なレイアウトはお任せいたします。研究室紹介動画は学科により３～２７本程度となる予定です。
　研究室の動画ブロックには研究分野を示すタグ、顔写真（各１～３枚）、研究室名、キャッチコピー、キーワードなどの文字が含まれます。
　なお、後述の学部PRのページも含め、下層ページは動画に集中してもらいたいため、特段アニメーションは含める必要はありません。

★学部PRのページ
　デザインパターンとしては学科ページと同一でも良いですし、多少のアレンジを加えた別パターンとして頂いても構いません。
　動画の周囲に、その動画のタイトル「学部PR動画」「施設紹介動画」「キャンパス紹介動画」の見出しと,それぞれ40～50文字程度のリード文を含める予定です。後日、動画を一つ追加し、４コンテンツになる場合があります。

★サイト全体の構成について
　最終的にCMS上に実装し、動画の追加・削除などの管理などを行いますが、この処理については弊社で行います。
トップページの当初の６要素に変更はありませんが、先々、要素が追加された場合、既存要素の複製や規則的な配置で対応できると運用がしやすいと考えています。
また、下層ページの各要素については増減が発生する可能性があり、これらはCMS上でのデータ追加や削除で連動できるデザインが望ましいです。
（例えば動画のブロックの場合、１動画１記事データとなり、研究者名や動画URL,キャッチコピー、写真などを指定することで動画のブロックが作成され、既存の記事が削除されるとサイト上の対応するブロックが消去される仕様となります）　コンテンツ領域の幅としてPC表示に横1440～1600px程度とし、それ以上のブラウザ幅となった時に左右の空白が単調にならない工夫があるとより良いです。
　5学科については各々キーカラーがあるので、トップページも含め、このキーカラーが明確になるようなデザインをお願いします。
　サイト公開までのスケジュールがかなり短いため、コーディングが極端に複雑にならないレベルが望ましいです。

サイトURL

設定なし

ページ数

2ページ

希望イメージ

シンプル 複雑

単色 カラフル

暗い 明るい

日常 高級

遊び心 厳粛

未来的 伝統的

女性的 男性的

希望する色

青系、トップページのカラーはスカイブルーを基調とする。

納品ファイル

• 高解像度JPG (.jpg)
• イラストレーター形式 (.ai)
• フォトショップ形式 (.psd)
• PNG形式 (.png)

補足説明

納品ファイルの形式はお任せしますが、Adobe CCで確認可能な形式、または特別なアプリケーションなく内容確認できる形式でお願いいたします。
動作を含む場合はHTMLソース、ビデオファイルなど、ご相談ください。

お渡しする画像素材などに依頼の詳細も含めていますので、参加を希望される方には必要なリソースをお渡しいたしますので、必ずご一報ください。

システムの制限で希望の締め切り日を設定出来ていませんでしたが、現時点で選択できるようになったので、当初予定の11/3に変更しました。

【質問】デザインコンペ終了後にコーディングできますか？
【回答】選定案のデザイン内容により必要なコーディングのボリュームやスキル、コスト感が変わると思いますので、コーディングまで作業が可能な場合は、その場合の費用のお見積もりもご提示ください。
条件が折り合えば、HTMLコーディングについても選定された方に追加の業務としてお願いする予定でいます。

11/3が祝日である事を失念しており、翌日中まで締め切りの確認ができないため、締め切りを11/4にずらしました。