WEBサイト制作の図面作成ソフトでいいものは？

Question

お世話になります。
WEBサイト制作する時にPhotoshopでだいたいのレイアウトとともに
ボタンなども作ってしまっているのですが、
そういった際に例えば

ボタンとボタンの間は20px空ける。とか
この画像のサイズはいくつで。とか
ここの幅はいくつにしたい。
ここの文字の色はrgbで#123456だ

などを自動で表示させられる（CADみたいな感じ？）機能や
そういったソフトがあれば楽だなと思っているのですが、
そういったものはあるのでしょうか？

最低でも、「ここの幅は25pxで」みたいなのを
図面の様に書けるものがあればと思っているのですが。
（イラレでやってもいいのですが、矢印引いて、テキスト書いてと２段階になるのが面倒なので
矢印引いたらpx指定のテキスト入力がすぐ打てる様にしたいです）

taloo · Accepted Answer

SPECCTR
http://www.specctr.com/
PS、FW、AIプラグインです。
Buy Specctrページの「Try Specctr Lite」から無料機能制限版（width、heightのみ）をダウンロードできます。
有料版は、やりたいことの全て＋αができると思います。

cacoo
https://cacoo.com/
先日知ったばかりですが、寸法線ツールがありました。
距離測定や色測定ができるかどうかはわかりません。
無料、または有料のウェブアプリです。

図形描画ツールもありますが、サイズ確認方法などが手間になると思いますし、Adobeのでやるのと大して変わらないかもしれません。
Visio
http://office.microsoft.com/ja-jp/visio/
ArgoUML
http://argouml.tigris.org/
EA
http://www.sparxsystems.jp/
これらのツールは「UMLツール」で検索すると出てきます。

ORUKA1951 · Answer

いえ、根本的に作り方が違う。HTMLは、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　これは、カタログをDTP( http://ja.wikipedia.org/wiki/DTP )やワープロとは根本的に異なる部分です。カタログを作るなら、「Photoshopでだいたいのレイアウトとともにボタンなども作って」で良いですが、HTMLはそれとはまるで異なる発想です。HTMLは、「どんな環境からもWebの情報を利用できるようにすべき」という発想で、SGMLを参考にして作られました。そこで、SGMLの下記の記事前後を読んでください。『今まで作成したデータが読めなくなるという問題が発生してしまう。そこで、プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。( http://ja.wikipedia.org/wiki/SGML#.E8.83.8C.E6.99.AF )』　すなわち、その文書の中で

ここは見出し

ここからはひとつの段落ですよ。

ここからまた新しい段落でとっても重要です。

　と、文書を読み解き内容を理解して最適な要素(Element)を選択してタグでマークアップしていきます。デザインは、ここで考えないことは分かりますよね。そうする事で、検索エンジンを含めて「どんな環境からもWebの情報』が利用できるようになるのです。ごく簡単な例が、黒の背景に白い文字でデザインした物は印刷できませんよね。それを印刷できるようにするためにこそHTMLが必要なのです。＞ボタンとボタンの間は20px空ける。とか＞この画像のサイズはいくつで。とか＞ここの幅はいくつにしたい。＞ここの文字の色はrgbで#123456だ　実際にナビゲーションをそのようにデザインする手順を・・まず、文書構造だけをHTMLで記述します。 ★タブは＿に置換してあるので戻す。文字コードはShift_JIS ★率直に文書構造しか書きません。先でどのようにでもデザインできるように!! ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　の右上のDATAでソースを貼り付けてチェックしてみること!! ＿＿サンプル＿＿＿＿＿＿＿＿

＿＿

本文見出し

＿＿

本文記事

＿

＿誰でもわかるシンプルなHTMLですよね。それでいて検索エンジンには、何処がheaderで何処が本文sectionかも理解できる。では、これをデザインしてみましょう。

ORUKA1951 · Answer

ではこれをデザインしてみましょう。
★今回は、スマホ用とパソコン用はリキッドで共用、印刷用は別途用意することとします。
　そのため、あえてピクセルでの位置指定やサイズ指定はしていません。
　そのためウィンドウの幅を狭めても横スクロールはありません。広くしたらセンター配置
　印刷用はヘッダーの後とフッターの前で改ページされます。また画面には現れないURLも印刷されます。
★800px幅、100px高さの適当な画像を用意してください。
★添付画像はGoogleが見ている姿です。Lynxブラウザでの表示
　（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）( https://support.google.com/webmasters/answer/35769?hl=ja#2 )

/* ここにブラウザ用のスタイルを書いていきます。 */
　と言う部分の次の行から、スタイルを【ひとつの宣言】ごとに追加して、作業の実際を確認することが目的です。
　ひとつの宣言とは、セレクタ{*****}を言います。一行の場合もあるし複数行にまたがっている物もあります。

/* ここにブラウザ用のスタイルを書いていきます。 */
html,body{margin:0;padding:0;}/* ウィンドウとの隙間を0に */
h1,h2,h3,p{margin:0;line-height:1.6em;}/* 日本語なのでマージンはなくて行高さを広くする */
div.header,div.section,div.footer{
width:80%;/* 幅はウィンドウ幅の80% */
min-width:460px;max-width:900px;/* ただしスマホ用の最小幅と、PC用の最大幅を決めておく */
margin:0 auto;/* ブロック間のマージンはなし */
padding:5px;/* 内側はすこし間を取る */
background-color:gray;/* 背景は灰色 */
color:rgb(255,255,180);/* 文字は薄い黄色 */
position:relative;/* 中の物の位置やサイズはこれを基準に */
}
div.header h1 img{
display:block;/* 画像をブロック要素に */
width:100%;height:auto;/* 幅はheader幅に合わせて伸縮、高さはお任せ */
}
div.header div.nav ol,div.header div.nav ol li{
list-style:none;
margin:0;padding:0;
text-align:center;
line-height:2em;
}/* ナビゲーションリストはリスト表示をやめる */
div.header div.nav ol li{
display:inline-block;/* 行内ブロックに */
width:20%;/* 幅はheaderの20% */
position:relatve;/* a要素のサイズ参照元 */
}
div.header div.nav ol li a{
display:block;/* inline要素をblock要素に */
width:100%;height:100%;/* li要素一杯のサイズ */
border:outset 4px silver;/* ボーダーのデザイン */
background-color:silver;/* 背景色 */
text-decoration:none;/* アンダーラインは消す */
}
div.header div.nav ol li a:hover{
background-color:white;/* マウスが乗ったら背景色を変える */
}
div.header div.nav ol li a:active{
border-style:inset;/* クリックでへこます。 */
background-color:black;/* 色なども変える */
color:yellow;
}

/* ここからは印刷用 */
/* ここに印刷用のスタイルを書いていきます。 */
div.header div.nav a:after{
content:"\A    (http://hoge.com"attr(href)")";
white-space:pre;
}
div.header div.nav:before{
content:"サイトマップ\A";
font-size:2em;font-weight:bold;
white-space:pre;
}
div.header{page-break-after:always;}
div.footer{text-align:right;page-break-before:always;}

これが、Webのデザインです。

＞ボタンとボタンの間は20px空ける。とか
　　margin-left:20px;/* 左を20px空けましょう */
＞この画像のサイズはいくつで。とか
　　width:480px;height:80px;
＞ここの幅はいくつにしたい。
　　width:800px;とかwidth:80%とか・・
＞ここの文字の色はrgbで#123456だ
　　color:rgb(255,255,0;
　　color:yellow;
　　半透明にしたけりゃ
　　color:rgba(0,255,0,0.7);

＞Photoshopでだいたいのレイアウトとともにボタンなども作ってしまっているのですが、
は、違うと言う意味が分かりましたか？？
　Photoshopは、画像やボタンというパーツを作ることのみに使用します。もっと安価な物で十分すぎる。
　Illustratorは。ロゴなどのイラストを作る時に使用します。

ORUKA1951 · Answer

ちょっとした補足
HTMLに文書構造を書かない・・必読「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の結果、HTMLには手を加えずに、ひとつのHTMLで、様々なユーザーエージェントに対応が可能になります。
　また、デザインをスマホとパソコン用に切り替えるなどユーザーエージェントにあわせることは無論、デザインを一新することも、デザインを選択することも可能です。
　⇒ナビゲーションリストを様々にデザインしてみよう。 ( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　にて、ブラウザの「表示」メニューから「スタイル(シート)」を選択して色々なデザインを選択してみましょう。(Chromeを除く)

ORUKA1951 · Answer

No.2で添付図と書きながら図を付け忘れてましたね。

WEBサイト制作の図面作成ソフトでいいものは？

いえ、根本的に作り方が違う。

ではこれをデザインしてみましょう。

ちょっとした補足

No.2で添付図と書きながら図を付け忘れてましたね。

SPECCTR

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング