bootstrapについて

締切済

質問者：daigorouiine
質問日時：2015/03/03 14:48
回答数：6件

恐れ入ります。webサイトを業務で制作している方にご教授いただけたらと思います。最近はフォトショップで最初にデザインするよりは、ブートストラップで作って、反映されるか確認しながらやって、その後にデザインにはめていくやり方に徐々になっていると言っている人がいたのですが、実際はどうなのだろうと思い、質問させていただきました。どなたかにお答えいただけたら助かります。宜しくお願いします。

20150201gooさま。回答ありがとうございます。プロの方々はどのように作っていくのが一般的（人やモノにもよると思うのですが）なのでしょうか。再度の質問で失礼します。

No.1の回答に寄せられた補足コメントです。補足日時：2015/03/03 15:40
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.1

回答者： 20150201goo
回答日時：2015/03/03 14:59

bootstrapって雛形があって、それを書き換えるという作り方なので、一般の方には楽でしょうね。

プロなら使いません。

プロでもPhotoshopで作り始めるなんて、しませんけどね(^_^;

- 0
- 件

通報する

この回答へのお礼

20150201gooさま。回答ありがとうございます。プロの方々はどのように作っていくのが一般的（人やモノにもよると思うのですが）なのでしょうか。再度の質問で失礼します。

通報する

お礼日時：2015/03/03 15:59

No.2

回答者： 20150201goo
回答日時：2015/03/03 19:04

チラシの裏側に鉛筆ですね　((笑)

)

- 0
- 件

通報する

No.3

回答者： nana_coco
回答日時：2015/03/04 21:58

こんにちは。

そうですね、最近のWEBサイトはレスポンシブでPC画面サイズからタブレット、スマホサイズまで表示できるスタイルが流行りですね。
昔のようにサイト全体が飾りなどで彩られていた凝ったデザインのサイトは少なくなり、テキストや画像の入ったBOXをどう並べて構成していくかみたいな方式に変化してきたと思います。
こうなってくると昔のようにイラレなどでデザインカンプを出してお客様に提案するよりも
実際にブラウザ上でのPCの見え方、スマホの見え方、JSの動きを確認して頂く事の方が早いのだと思います。
紙に出したレスポンシブのデザインって大概ちょっとショボイので、お客様も動的に動くサンプルを見せた方がインパクトもあり、即決しやすい傾向に私は感じます。
私はbootstrapは使用していませんが、wordpressでの案件（先方が投稿更新を希望する事が多いので）が多いので簡単なサンプルをwordpressで実際に動かしてお客様に提案しています。
制作会社によってまちまちかと思いますので参考まで。

- 0
- 件

通報する

この回答へのお礼

nana-cocoさま。回答ありがとうございます。wordpressで提案という事もあるのですね。
知らない事が多すぎて、実際とても色々不安になりますが頑張りたいと思います。この度は誠にありがとうございました。

通報する

お礼日時：2015/03/05 11:03

わかるわかる

No.4

回答者： shockatz
回答日時：2015/03/05 01:00

Bootstrap3が使われる局面は、

・Webアプリケーションの場合
・情景系サイトの場合
がほとんどで、広告系サイトの場合は提案段階からビジュアル要素が強いものが多いため、束縛の多いCSSフレームワークはあまり使われません。
当社では、広告系以外でも、Webサイトの初期段階からHTML/CSSは使用せず、IllustratorやPhotoshopの場合が多いので、Bootstrap3であってもPhotopでデザインモックを起こします。

Bootstrap3のUI要素を集めたPSDもあれいますので、かなり使いやすくはなってきてます。
http://www.designshock.com/bootstrap-3-psd/

デザイナがBootstrap3の機能を理解し、そのビジュアルが採用され、そのままサイト構築できれば最高なのですが、なかなか現状、顧客がウンと言ってくれないです。
最小限言えるのは、Bootstrapといえども習得コストは大きく、デザイン束縛や欠点もあるので、「採用しよう」という強い意志がないのであれば、採用を止めるか、部分利用したほうが無難だと思います。

- 0
- 件

通報する

この回答へのお礼

shockatzさま　回答ありがとうございます。illustratorやphotoshopを使われているという事でほっとしました。せっかくデザインカンプ、スライスなどを教わっても、実際は業務では使われない傾向が強くなってきているのかと思い、心配になってしまいました。それでも引き出しは多いほうがいいので、bootstrapの方も知識習得に頑張りたいと思います。この度は誠にありがとうございました。

通報する

お礼日時：2015/03/05 11:48

No.5

回答者： ORUKA1951
回答日時：2015/03/08 18:27

＞最近はフォトショップで最初にデザインするよりは、

　重要なのはこの部分だけですね。今後HTML+CSSが普及していくと思いますが、そうなるとphotoShopやIllustratorを使ってサイトを作っていたら取り残されてしまいます。必ずしもBootstrapに限るわけではありません。
　プレゼンテーションをスタイルシートに任せるとデザインの制約がなくなります。
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

手順としては
1) 文書構造を示すようHTMLでマークアップする。
2) それをデザインしていく。
　基本的にはリキッドデザインで必要ならmediaqueryを使って表示サイズごとにデザインを変える。

理由)
　以下、ここまでの経緯を簡単に説明する。とっても大事なキーポイントですから

　1999年のHTML4.01の勧告以来強く言われ続けてきた、最重要である『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ので御存知だと思います。
　それまでのHTMLは、まるで印刷物を作るようにデザインを決めてページを製作する手法がとられてきました。これは、視覚系ブラウザで見る分には良いですが、それでは本来のHTMLの目的である文書構造が分かりません。検索エンジンも含めて利用できない!!
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。・・・【中略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　それ以前のHTML3.2などは悲惨な状況でしたね。

　その反省で策定されたのが、HTML4.01でした。
『こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　その時点で、PhotoshopやIllustratorでデザインして切り貼りする作り方は否定されました。

　それでも、理解されることは少なく、その典型的な例が『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。まったく逆に、デザインのためにDIVが使われてきた。
　HTML5では、その反省から、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』そして、DIVは原則使えなくなりました。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで

その結果、
1) 文書構造を示すようHTMLでマークアップする。
　HTMLでは、ひたすら文書構造だけに注目してマークアップしていきます。そのため、HTMLの基本形は例としてあげるなら
<body>
　<header>文書のヘッダ
　　<h1>ページの見出し</h1>
　　<nav>ナビゲーション</nav>
　</header>
　<section>本文
　　<h2>見出し</h2>
　　<section>項</section>
　　<aside>本文と直接関係ない記事</aside>
　</section>
　<footer>文書のフッタ</footer>
</body>
と言う形になるはずです。HTML4.01に従うと、
<body>
　<div class="header>文書のヘッダ
　　<h1>ページの見出し</h1>
　　<div class="nav">ナビゲーション</div>
　</div>
　<div class="section">本文
　　<h2>見出し</h2>
　　<div class="section">項</div>
　　<div class="aside">本文と直接関係ない記事</div>
　</div>
　<div class="footer">文書のフッタ</div>
</body>
のようにマークアップされてきたものてすね。
　HTMLには文書構造しか書かれていませんので、検索エンジンにも理解されやすいし、HTMLのメンテナンスもとっても容易になります。

2) それをデザインしていく。
　プレゼンテーションと文書構造が独立していますから、使用目的（様々な幅の視覚ブラウザ、携帯電話、印刷機、スクリーンリーダー、点字端末・・・）に合わせて自在にデザインできますし、デザインの自由度も大幅に向上します。
　もちろん、スタイルシート一つ書き直せばサイト全体のデザインを一挙に変更できますし、そのたびにHTMLをいじる必要もなくなります。

　Photoshopはビットマップ(ラスター)画像を編集するソフトウェアでウェブには直接は関係ないです。Illustratorは、DTP( https://ja.wikipedia.org/wiki/DTP )が本来の目的ですから、新しい--とは言っても1999年以降---ではあまり役に立ちません。これらはあくまで、クライアント向けのプレゼン用資料を作成したり打ち合わせ用です。

　面白い例ですが、（Chrome以外で）下記のページに行って、まず画面を右クリックからソースを見てください。シンプルなのが分かるしメンテナンス性がよいのも理解できるでしょう。
　ついでブラウザの[表示]メニューから[スタイル(シート)]を選択して、色々なスタイルシートを選択してみてください。ウィンドウ幅を変えても良いでしょう。
　さらに、[ファイル]メニューから[印刷プレビュー]を選択しても良い。「スタイルシートを使用しない」・・を選択すると検索エンジンがどう見ているかも分かるでしょう。これはSEO的にもベストなものになります。
　⇒ナビゲーションデザイン - Google 検索( https://www.google.co.jp/?gws_rd=ssl#safe=off&q= … )

＞（HTMLをマークアップし）その後にデザインにはめていくやり方に徐々になっている。
　1999年当時は、ブラウザの対応が間に合ってませんでしたが、さすがに15年も経っていますので、「徐々に」ではないでしょう。HTML5の時代になれば、そうならざるを得ないのですから。

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さま　色々な情報を提供して頂きありがとうございました。勿論、スライスしたものだけでwebサイトはできないのはわかっているので大丈夫です。リンク色々はっていただいたので再度読み返して勉強させていただきます。この度は誠に有難うございました。

通報する

お礼日時：2015/03/12 21:53

No.6

回答者： ORUKA1951
回答日時：2015/03/09 15:45

No.5 です。

＞面白い例ですが、（Chrome以外で）下記のページに行って、
肝心のページを示していませんでしたね。

　面白い例ですが、（Chrome以外で）下記のページに行って、まず画面を右クリックからソースを見てください。シンプルなのが分かるしメンテナンス性がよいのも理解できるでしょう。

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )

　ついでブラウザの[表示]メニューから[スタイル(シート)]を選択して、色々なスタイルシートを選択してみてください。ウィンドウ幅を変えても良いでしょう。
　さらに、[ファイル]メニューから[印刷プレビュー]を選択しても良い。「スタイルシートを使用しない」・・を選択すると検索エンジンがどう見ているかも分かるでしょう。これはSEO的にもベストなものになります。
についての説明です。

No.4への補足
＞せっかくデザインカンプ、スライスなどを教わっても、実際は業務では使われない傾向が強くなってきているのかと思い、
　上記ページでも分かるように、スライスではリキッドなページは作れませんし、スマホに対応させるためのmediaqueryも不可能です。そもそも、あのようなHTMLは書けません。世界は『HTMLエディタで作成するシンプルなコードは検索エンジン最適化にも効果的であることから、一部のウェブデザイナーには見直されつつあり( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )』よりさらに進んでいるということです。
　いまさら20年も前の手法、スライスなんか学んでどうするの？？？
　シンプルなHTMLを書いて、様々なデザインの提案を代替スタイルシートで切り替えて説明するほうがよっぽど楽です。HTMLは手を加えずにスタイルシートだけ、チョコチョコと弄くればよいのですから。
　先日回答した
【至急】ul li 行間調整ができない!! ブラウザごとに画面表示が異なります!!( https://oshiete.goo.ne.jp/qa/8938261.html#an9827 … )
　の見本コードは、書けますか？