単ページ・レスポンシブサイトの基本デザイン作成（UI/CG/構造デザイン・HTMLコーディング無し）の仕事

依頼の募集内容

発注者が選定した提案

実際の支払い金額

66,000 円

実際の受注者

Reoru 本人確認

東京都のデザイナー・ディレクター

ogumemura 様 都内でデザイナーをしておりますReoruです。 本件、ご依頼内容を拝見しまして コンペに参加させて頂きました。 【全体】 レスポンシブWebデザイン 制作データ画面幅（SP）：750px（@2x） 制作データ画面幅（TB）：1024px（@2x） 制作データ画面幅（PC）：1300px コンテンツ幅（PC）　　：960px 依頼詳細にてご呈示いただきました「C案」に近い仕様です。 カテゴリー毎にコンテンツをまとめ、 選択したコンテンツを表示切替により、ページ遷移することなく詳しく見せます。 添付3枚目の「00_index_gif」GIFアニメーションファイル、 または後述の参考サイトを参照していただくと、 もっと見る

小まめなご連絡とご対応を頂き、ありがとうございます。 今後ともよろしくお願いいたします。

集まった提案(一部)

詳しい依頼の募集内容

概要・特徴

手打ちHTMLで作成された旧サイトについて、コンテンツを引き継ぎつつレスポンシブサイト化するための、基本的なUI、CG、構造デザインの依頼です。

★参考用のイメージその他を添付します。添付ファイルにはパスワードがかかっていますが、利用される前にメッセージを頂ければパスワードをお送りいたします。

操作感の良いUIとなるような配慮、サイトそのものの見せ方を、CG的なイメージと合わせてご提案いただきたいと思います。

スマホ表示時からPC表示時まで展開させた場合の3～4点の画像イメージをお願いいたします。
サイト全体のデザインに、見出し H1～H6, 段落 p, テーブル table, リスト ul/ol, blockquote といった基本要素のデザインを含めてください。

HTMLコーディングは弊社で行いますので、HTML化時に利用しやすい形でのPhotoShopその他のデータでご納品いただきます。
後々各画像パーツの取り出しに支障が無ければ、Adobe XD CC等のプロトタイピングツールやDreamWaver等でHTMLを書いてしまう形でも問題ありません。
PhotoShop以外の納品形式を使用される場合は、念のため事前にご連絡ください。

依頼詳細

現状、複数ページに分割されたオーソドックスな構成のサイトですが、全て手打ちHTMLで運用されています。リニューアル後も手打ち運用を希望されています。

複数HTMLファイルに渡ったメニュー部分など、サイト全体の共通部分などを手打ちHTMLで管理していく負担や、運用上のファイル管理などを簡易化するといった目的で、HTMLファイルを単一にしたいと考えています。
（お知らせのみ、HTMLでは無い形で別途用意したファイルを読み込みJavaScriptでHTML化して表示といった形で、普段の運用者がHTMLに触れずに済む方法を考えています）

ブラウザを大きく開いていても、ある程度間が保てるようなデザインを希望します。

以下のようなメディアクエリの展開を想定しているので、それぞれに合わせたイメージをご提案ください。ブレイクポイント数値は目安であり、絶対的な条件ではありません。
PCを2展開に分けていますが、無理なく展開できるデザインならば単一で構いません。また、1920pxより大きな4Kレベルの表示時、コンテンツが画面一杯に広がる必要はありませんが、空いた領域が虚無とならないよう、適当な背景イメージ、テクスチャがあるとベターです。

横 320～640程度 スマホ
横 640～800～1024程度 タブレット
横 1024～1600程度 PC
横 1600～1920程度 PC

現サイトの各ページはボリュームのバラツキが大きいですが、古いコンテンツなどを整理して、カテゴリ毎に纏める形で整理する予定です。

大まかな想定としては、

A) Masonry的なコードを使用して、各カテゴリブロックを１ページに詰め込み配置する

B) https://alvarotrigo.com/fullPage/examples/apple.html スクロールによって切り替わる紙芝居的なサイトにする

C) 各コンテンツグループのボリュームがバラバラなので、B)案がとりづらいかもしれず、最適なナビゲーションを用意しつつ、縦方向への巻物的サイトにする

など、いずれかの形に落とし込むイメージを持っています。もっと良いアイデアがあれば、そのような提案でも問題ありません。

B案を採用する場合、各コンテンツの内容が商品紹介的な大きなイメージ画像＆シンプル内容ではなく、通常のコンテンツとなるため、各ページの高さにバラツキが出ると思われます。

B,C案を採用する場合、またはそれ以外でも、各コンテンツへダイレクトに移動できるような良いUI提案が含まれていると良いです。

全体的な骨組みをFoundationやBootstrap等フレームワークのサイト内で紹介されているようなテンプレを参考にした形でも、著作権的な部分をクリアされているようならば問題ありません。
例） https://foundation.zurb.com/templates.html

また、レスポンシブHTML化する際、余りトリッキーな方法を使わずとも再現できるようにご配慮頂きたく※、または参考になるデモコード、参考サイトをご提示ください。

PC時の大きな画面表示の際には、画面サイズに対してコンテンツのボリュームが少なすぎるケースがあるかもしれません。
ストックフォトの使用について、多少でしたら予算を用意できるので、必要に応じて使用してください（権利関係に御注意ください）。トップイメージ用の画像も含めて、総額1万円前後までを想定しています（エコ関連の画像なので比較的リーズナブルな物が多いと思います）。
参考）https://pixta.jp/tags/%E3%82%A8%E3%82%B3?utf8=%E2%9C%93&keyword=%E3%82%A8%E3%82%B3&search_type=0

なお、提案時はカンプ用データを使用していただき、最終的な支払いその他は弊社で行いますので、選定後、使用した画像のポインタをお示しください。

その他、ご質問があれば早急に回答するように致しますので、ご遠慮なくお問い合わせください。

※レスポンシブHTMLなので、モバイルからPC画面最大化まで単一のHTMLとなります。モバイル時、PC時でサイト上パーツの位置関係や登場順が大幅に変わる場合、何らかの対応が必要となるため、このような変化が多用されていると設計の工数が大幅に増えてきます。メニュー位置を固定貼付するといったオーソドックスな対応は問題ありませんが、モバイル時、PC時の変化について、単一共通のHTMLで無理なく再現できる範囲か検討するようにお願いいたします。

最近、組織の公式ロゴが刷新されました。サイズパターンが各種ありますが、添付ファイルには1点のみ含めます。デザイン上、他のパターンを試したい場合はご一報ください。質問等あればご遠慮なくお問い合わせください。

★お願い
納品される画像イメージにおいて、上下左右に並ぶ要素のサイズや高さが数ピクセルランダムにずれているような状態では無く、できるだけ綺麗に揃えて置いていただけると、コーディング時に悩まず、テンポ良く作業出来ます。最近、組織の公式ロゴが刷新されました。サイズパターンが各種ありますが、添付ファイルには1点のみ含めます。デザイン上、他のパターンを試したい場合はご一報ください。

サイトURL

設定なし

ページ数

1ページ

希望イメージ

シンプル 複雑

単色 カラフル

暗い 明るい

日常 高級

遊び心 厳粛

未来的 伝統的

女性的 男性的

希望する色

青系、緑系、エコ活動関連のサイトなので、イメージ的に沿ったカラーリング

納品ファイル

設定なし

補足説明

選定内定後からデザイン確定・納品完了までの間、多少の修正依頼やデザイン的なご相談が発生すると思いますが、最後までスピーディーにご対応頂ける方が望ましいです。日中、お勤めで休日・夜間のみのご連絡となる方は事前にその旨ご連絡ください。

DMで頂く制作に関係する質問につきましては、コンペの公平性を保つため、匿名にした上で質問と回答を公開するようにいたします。
また、選定前、提案イメージに調整を依頼する場合も、変更依頼が公になる形でお願いする場合があります。

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

【質問】
単一であることはやはりマストな条件でしょうか？
【回答】
マストではありません。より良いアイデアがあれば、その内容でご提案ください。
但し、HTMLファイルが分かれたとき、各ファイルで書き換えが発生しそうな共通要素を、HTMLの知識無しに問題無く書き換えられるような運用上の仕組みも合わせてご提案頂きたいです。

　早めに着手して頂いた参加者の方には申し訳ありませんが、ギリギリに参加打診された方が複数名いることもあり、締め切りを延長したいと思います。
　少額ですが、依頼金額、参加報酬数も若干上乗せいたしました。
　通常、締め切りギリギリに提出される流れだとは思いますが、提出予定の方は早めに"提案予約"をして頂けると大変助かります。

デザイン案の応募、ありがとうございました。
これで締め切りとしたいと思います。
デザインと運用の実現性と併せ、クライアント様と相談の上、必要な場合は質問回答やイメージの調整をお願いする場合があると思いますので、その際はよろしくお願いいたします。
選定案確定まで、少しお時間を頂ければと思います。

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

■ 選んだ理由

クライアント様の意向が主ですが、公的機関ということもあり、グラフィック的な部分でオーソドックスな印象が好まれた物と思われます。

■ 提案者全員のお礼・コメント

今回はご縁がありませんでしたが、次点とさせて頂いた提案も印象的で大変参考になりました。

添付ファイル

※ 締切後、添付ファイルはクライアントと当選したランサー以外は閲覧できません ( 詳細 )

• ランサーズ依頼用.zip