Bootstrapで作るwebサイトデザインの考え方
現在webデザインを学習中です。
コーディングも少しやっています。
今回、非営利団体のサイトをボランティアでデザインすることになりました。
私がデザインを担当し、
コーディングする方はweb制作では長いキャリアを持つベテランのコーダーさんです。
「ボランティアなので、Bootstrapを使ってコーディングしますので、デザインもそれを意識してお願いします。」
と言われましたが、意識するとは具体的にどのようなことでしょうか？
１２分割を意識することぐらいです。でも具体的な方法はよくわかりません。
ぼんやりした質問で恐縮ですが、少しでもヒントがあればありがたいです。
どうぞよろしくお願いします。
「ボランティアなので、Bootstrapを使ってコーディングしますので、デザインもそれを意識してお願いします。」
と言われましたが、意識するとは具体的にどのようなことでしょうか？
そういう注文を付けた人に「それを意識して」の意味を聞くのが筋です。ここで事情を知らない赤の他人に聞いて、勝手な返事が返ってきて、当たれば良いけどハズレだったら困るのでは？
@sayaxxx
Questioner
ありがとうございます。おっしゃる通りです。二度ほど聞いてみましたが具体的な回答がもらえず、以後聞きにくい感じなので、色々調べてみたり、こちらで少しでもヒントをいただけないかとお尋ねした次第です。
コーダーさんは何をコーディングするのか分かりませんが、何にせよコーディング結果の html ソースのサンプルとかをもらえるなら、それをもらって自分なりに Bootstrap の適用を考えてデザインし、結果を見てもらってはいかがですか？
@sayaxxx
Questioner
今回はあくまでも私がデザイン担当、
コーダーさんにデザインをお渡しして、コーディングをされてサーバーにアップされるという分担になっております。
アドバイスありがとうございます。
今回はあくまでも私がデザイン担当、コーダーさんにデザインをお渡しして、コーディングをされてサーバーにアップされるという分担になっております。
まず質問者さんがサイトのデザインを作成してそれをコーダーさんに渡し、次にコーダーさんはそれを見て html, css をコーディングする。コーダーさんが css に Bootstrap.css を使えるようにデザインの際に質問者さんが配慮するという話と理解しました。
それは自分の想定外でした。でも、そういうことが現実的なのか自分としては疑問です。
例えば（例えが悪いかもしれませんが）、サイトのあるページを以下のように作るとします。
ナビバー、テキストボックス、ボタン、table とその子要素、ページャーが実装されていて、それらに Bootstrap5 の css を適用しています。
こういうページをデザインから先に作るのは無理ですよね。デザインする前にページに何がどういう形で含まれるかの情報（できれば html ソース）をもらわないと、何ともならないと思うのですが。
そのあたりどうなんでしょうか？
ボランティアなので
デザインやフロントエンドの専門ではないですが、ボランティアということはつまり予算が無いのですよね。
予算が無いので「なるべく労力はかけたくない」という状況なのだと想像します。
そして、労力をかけたくないので「Bootstrapを使う」という手段を選択されたのでしょう。
なので文脈から想像すると「Bootstrapを使ってコーディングするにあたってなるべく労力がかからないデザイン」ということではないかと推測します。
@sayaxxx
Questioner
ご回答ありがとうございます。
そうですね。なるべく労力がかからないデザインというのはその通りです。
大胆ではなく、シンプルなデザインを心がけようと思っていますが
Bootstrapは初めから余白が付いていたりするので、そこも踏まえてデザインする必要があるのか？
というところが迷っている部分です。
コーダーさんはCSSで調整されると思いますが
一般的なコーポレートサイトのような感じならば、あまり気にせずにデザインすればいいのでしょうか？
コーダーさんご本人にお尋ねすればいいのですが
明確な回答を頂けずに、手が止まった状態でしたので
ここで相談させていだきました。
横レス失礼します。
コーダーさんはCSSで調整されると思いますが
質問者さんがデザイン担当なのですよね。で、Bootstrap の css を質問者さんが使ってデザインするのではないのでしょうか？
コーダーさんは何をコーディングすることになっているのですか？ css がコーダーさんに関係ありますか？
質問者さんがデザイン担当なのですよね。で、Bootstrap の css を質問者さんが使ってデザインするのではないのでしょうか？
私は次の理解で回答しています。
質問者さん：ヴィジュアルデザインを担当
コーダーさん：ヴィジュアルデザインをWebサイトにする作業を担当（HTMLやCSSが成果物）
まず私は専門はバックエンドのシステム開発なので、コーダーさんの立場に近い人の意見と受け取っていただければと思います。
Bootstrapは初めから余白が付いていたりするので、そこも踏まえてデザインする必要があるのか？
全てをフレームワークに則ることは難しいので、優先度やトレードオフによる判断が必要になります。
その上で、デザイナーの観点ではいかがですか？
デフォルトの余白で十分でしょうか？調整したほうが見栄えが良かったり使いやすかったりしますか？
デザイナーと協力する立場の人間としては、デザイン専門家としての意見や判断を必要とします。
制作コストだけが判断基準ではないので、コーディングの都合だけでは決められないものです。
ある程度具体的なものがないと制作コストの見積もりや良し悪しの判断ができないので、
まず質問者さんが「意識するとこんな感じです」というのを何かしらの形で見せてはいかがでしょうか？
@sayaxxx
Questioner
なるほど。よくわかりました。
まずはこちらのデザインをある程度作り上げて、尋ねてみます。
コーダーさんとは今後しっかりコミュニケーションを取って擦り合わせていきます。
ご丁寧な回答ありがとうございました。
少しでも参考になったのであれば良かったです
レスポンシブのターゲットや採用したコンポーネントの説明を開発者に聞きながらデザインを補正してはどうでしょう。
私なら wordpress with BootstrapWP を採用したいです。世の中はwordpressが幅を利かしていますよ!
@sayaxxx
Questioner
BootstrapWPは初めて知りました。
デザインする側が、コーディングも理解しているかどうかで、かなり違いが出てきますよね。
もっともっと勉強と経験を積んでいきたいと思っています。
コーダーさんとのコミュニケーションを頑張ります。
アドバイス、ありがとうございます。
