A 回答 (6件)
- 最新から表示
- 回答順に表示
No.6
- 回答日時:
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 … )
の見本コードは、書けますか?
No.5
- 回答日時:
>最近はフォトショップで最初にデザインするよりは、
重要なのはこの部分だけですね。今後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の時代になれば、そうならざるを得ないのですから。
ORUKA1951さま 色々な情報を提供して頂きありがとうございました。勿論、スライスしたものだけでwebサイトはできないのはわかっているので大丈夫です。リンク色々はっていただいたので再度読み返して勉強させていただきます。この度は誠に有難うございました。
No.4
- 回答日時:
Bootstrap3が使われる局面は、
・Webアプリケーションの場合
・情景系サイトの場合
がほとんどで、広告系サイトの場合は提案段階からビジュアル要素が強いものが多いため、束縛の多いCSSフレームワークはあまり使われません。
当社では、広告系以外でも、Webサイトの初期段階からHTML/CSSは使用せず、IllustratorやPhotoshopの場合が多いので、Bootstrap3であってもPhotopでデザインモックを起こします。
Bootstrap3のUI要素を集めたPSDもあれいますので、かなり使いやすくはなってきてます。
http://www.designshock.com/bootstrap-3-psd/
デザイナがBootstrap3の機能を理解し、そのビジュアルが採用され、そのままサイト構築できれば最高なのですが、なかなか現状、顧客がウンと言ってくれないです。
最小限言えるのは、Bootstrapといえども習得コストは大きく、デザイン束縛や欠点もあるので、「採用しよう」という強い意志がないのであれば、採用を止めるか、部分利用したほうが無難だと思います。
shockatzさま 回答ありがとうございます。illustratorやphotoshopを使われているという事でほっとしました。せっかくデザインカンプ、スライスなどを教わっても、実際は業務では使われない傾向が強くなってきているのかと思い、心配になってしまいました。それでも引き出しは多いほうがいいので、bootstrapの方も知識習得に頑張りたいと思います。この度は誠にありがとうございました。
No.3
- 回答日時:
こんにちは。
そうですね、最近のWEBサイトはレスポンシブでPC画面サイズからタブレット、スマホサイズまで表示できるスタイルが流行りですね。
昔のようにサイト全体が飾りなどで彩られていた凝ったデザインのサイトは少なくなり、テキストや画像の入ったBOXをどう並べて構成していくかみたいな方式に変化してきたと思います。
こうなってくると昔のようにイラレなどでデザインカンプを出してお客様に提案するよりも
実際にブラウザ上でのPCの見え方、スマホの見え方、JSの動きを確認して頂く事の方が早いのだと思います。
紙に出したレスポンシブのデザインって大概ちょっとショボイので、お客様も動的に動くサンプルを見せた方がインパクトもあり、即決しやすい傾向に私は感じます。
私はbootstrapは使用していませんが、wordpressでの案件(先方が投稿更新を希望する事が多いので)が多いので簡単なサンプルをwordpressで実際に動かしてお客様に提案しています。
制作会社によってまちまちかと思いますので参考まで。
nana-cocoさま。回答ありがとうございます。wordpressで提案という事もあるのですね。
知らない事が多すぎて、実際とても色々不安になりますが頑張りたいと思います。この度は誠にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 転職 下記の仕事内容を分かりやすく教えて下さい。ブラックですか? 仕事の内容 ・制作物の進行・制作管理・ス 4 2023/01/14 09:13
- インターネットビジネス 個人事業用のwebサイトを作るためのおすすめの本を教えて下さい。 4 2022/06/30 17:20
- その他(プログラミング・Web制作) ほぼwordpress案件のWEB制作会社ってどうですか? 1 2022/06/23 09:26
- 企画・マーケティング ブランディングも大事だけど運用方法を考えるのも大事ですよね? 2 2022/08/07 21:49
- Web・クリエイティブ 趣味でグラフィックデザインをして見たいと最近考えてるのですが、質問で、平面構成のデザインとはなんです 1 2022/08/21 19:32
- Web・クリエイティブ 今本当に悩んでいます。将来グラフィックデザイナーを目指し専門学校に通ってるのですが、正直グラフィック 1 2022/09/10 17:58
- 会社・職場 今後の仕事について 閲覧ありがとうございます。 私は現在28歳の男性です。 自分が向いている仕事、続 3 2022/08/01 12:19
- 画像編集・動画編集・音楽編集 A1サイズで画像作成(300枚以上の写真を並べたいです) 1 2023/08/03 12:18
- デスクトップパソコン google chrome、イラストレーター、フォトショップの同時作業におすすめのPC構成 1 2022/10/19 14:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
複数のボタンを等間隔に、かつ...
-
divを横に並べる方法
-
min-heightとheightの違いについて
-
スペースを使わず文字位置を揃...
-
[CSS]リキッドレイアウト上で、...
-
h1のテキストサイズよりh2の方...
-
HPの外側の両サイドにある広告...
-
1時間30分を簡単に表したいで...
-
cssにてボタン位置を下揃えしたい
-
モバイルサイト用のタブ型メニュー
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
background-imageが効かない
-
3カラムレイアウトで「常に残り...
-
html5でheader,footerこみのwra...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報
20150201gooさま。回答ありがとうございます。プロの方々はどのように作っていくのが一般的(人やモノにもよると思うのですが)なのでしょうか。再度の質問で失礼します。