「CMSデザイン／レスポンシブ ＠熊本大学大学院 社会文化科学研究科 教授システム学専攻」へのpakkun08さんの提案一覧

メンバーからのコメント

サイエンスウェブ株式会社さま

この度は貴コンペに参加させて頂きます
pakkun08と申します。
少しでも貴社さまのご意向を叶えられる
デザインを制作できればと思います。

★TOPページ（PC日本語）のデザインから
　お送りさせて頂きます。
　追って、スマートフォンページ、
　各種見え方のイメージ違いのデザインを
　お送りさせて頂きます。

ーーーーーーーーーーーーーーーーーー
デザインについて
ーーーーーーーーーーーーーーーーーー
【トーン＆マナー】
・現行サイトのトーンを踏襲した、白を基調とした
　明瞭で清潔感、信頼感のあるトーンで、
　要所要所にて、ロゴのブルーとイエローを
　キーカラーとして採用し、メリハリを感じられる
　ようなデザインを目指しました。
・トップページでは、写真を大きく使用し、
　ユーザーにとって内容をよりイメージして
　もらいやすいようなデザインを目指しました。
・文字はできるだけ大きくし、読みやすさを担保しております。
・画像文字は極力避け、どのようなデバイスでも
　テキストを読みやすくなることを想定しております。
・使用するフォントはGoogle Fontsの「Notoシリーズ」を採用し、
　デジタルデバイスとの親和性を担保し、
　刷新感も演出できるようにしました。
　また、和文欧文ともに存在するフォントですので、
　両言語ともに統一感をもたせることができます。

【デザイン】
・現行サイトとレイアウトを変更させて頂いている箇所も
　幾つかございますので、別紙（「★構成について」）の
　資料の番号に添って以下に記載させて頂きます。

　ーーーーー
　①入学をご希望の方へ
　→入学意欲が高まった学生が、迷わずに
　　入学情報を得られるようにヘッダーエリアに
　　配置しております。
　　追ってデザインをお送りしますが、
　　PCのヘッダーはスクロールすると追従する
　　仕様を想定しております。

　②メインビジュアル
　→こちらは専攻のコンセプトの内容を
　　打ち出したビジュアルを作成しております。
　　背景のイメージは学内の授業や研究の雰囲気を
　　伝えられるような動画流すことができれば
　　サイトにも動きがでて、ユーザーにも
　　より雰囲気を伝えることができるのではと
　　考えております。
　　なお、文字や概念図などを載せて、
　　暗めのトーンにしているので、
　　動画自体はあくまで雰囲気を伝えられることを
　　優先としたクオリティでも十分かと考えております。

　③「おすすめ」の階層に含まれるコンテンツ
　→現行サイトのナビゲーションの「おすすめ」内の
　　コンテンツをレイアウトしているエリアです。
　→「Special program」は、年度とタイトルの
　　組み合わせの構成にし、今後内容が増えた際に
　　更新し易いようなデザインを意識しております。

　④これまでの実績や取り組みなど
　→現行サイトでは左部に配置していたコンテンツを
　　「本専攻のあゆみ（仮）」という内容で
　　グルーピングしてみてはどうかと思い、
　　レイアウトしております。
　　過去の実績であったり、現在も実施されている
　　取り組みであったりするので、その歴史を
　　感じられるようなエリアになればと考えております。
　　（HRアワードの画像は高解像度のロゴが2017年の
　　ものしかピックアップでませんでしたので、
　　表記が2017のものとなっております。申し訳ございません。）

　⑤関連リンク
　→内容をよりイメージできるように、
　　画像を用いたデザインにしております。　　　
　ーーーーー

・SUBページは「修了までのプロセス」のページをベースに
　制作させて頂いております。
・見出しの文字を大きく、各内容ごとの余白を十分に設け、
　見やすく読みやすいデザインを目指しました。
・左ナビゲーションは階層レベルがより明快になるように
　罫線の長さやリンクエリアの厚みに変化を持たせることで
　よりわかりやすくしております。
・左ナビゲーション下部に配置する各種リンクについては、
　あまり情報が多すぎても雑多な印象になってしまうかと考え、
　現行サイトの内容から、現在実施されている内容についてのみ
　抜粋して掲載しております。

・SPページは基本的にはPCのデザインの構成と同様です。
・メニューが開いた際のデザインは、ご依頼内容にありましたように
　テキストとアイコンで第2階層のボタンがレイアウトされている
　デザインにしております。

【備考】
・コンテンツエリアの幅は、最大1122pxで制作しており、
　こちらの数値は30pxのマージンで、2、3、4、6、8カラム
　といった様々なサイズに均等に分けることができる
　汎用性の高いグリッドを刻める数値となっております。
・英語ページについては、日本語ページのみのものも
　存在するようですので、（例：http://idportal.gsis.kumamoto-u.ac.jp/）
　英語ページのリンクには「(japanese only)」などの
　テキストを記載するなどの心配りが必要になってくるかも
　しれないと思いました。（今回デザインは記載しておりません。）
・トップページの一部に、日本語ページにはあって
　英語ページでは省略している文言がありますが、
　以前別件でグローバルサイトを制作した際に、
　ネイティブのデザイナー曰く、そこまで細かい文章は
　日本の方と違って読まないということを伺ったので
　長過ぎると感じたものは削除しております。
　（例：メインビジュアルの文章など）

以上でございます。
長文でのご説明となり
お手数おかけして申し訳ございません。

引き続き何卒よろしくお願いいたします。