ホームページの下書の仕方を教えてくださいwordとか使うと便利ですか？

質問

ホームページの下書の仕方を教えてくださいwordとか使うと便利ですか？

写真や画像、ボタンをどう配置するとか文章をどういうレイアウト
で書くかとかをすぐにhtmlで記述するのではなく何か下書きのような
物を作成すると作業効率が上がると思うのですが、その際どんなソフト
を使うと便利でしょうか。wordとかpowerpointとか使うんですか。

wordやpowerpointだと写真とか文章、リンク、ボタンを配置すると１枚のページに綺麗に
おさまりきらないのではないでしょうか縦の長さは何とかなるかもしれませんが
横幅はおさまらない時があるような気もします。
何かホームページの下書きをする良い方法を教えてください。

回答No.7

Seravy · ベストアンサー

私が作るときは、第一案は紙です。
A4用紙とシャープペンがあれば大抵のデザインのベースは描けます。
アナログの方が追加削除がカンタンで非常に便利です。

ソフトを使うのであれば、その後、それをスキャンするか、見ながらドロー系ソフトでレイアウトの大まかな案を作ります。
IllustratorでもWordでもOmniGraffleでもInkspaceでもなんでもいいのですが、私がよく使うのはIllustratorです。そのままデザイン作業に取り掛かれますし、Photoshopに持って行くにしても流用可能です。

イラレやPhotoshopを手に入れる以前は、ほぼ紙上でレイアウト、デザインし、大まかにサイズを決めておいて、直接Webページに起こしていました。それでも十分効率的ですから、サイズ合わせの必要がなければソフトを使うまでもないとも言えますね。

結局のところ、便利だと思うなら使うべきですし、どうせ使うなら所詮モックアップですので作業しやすく使い易いお好みのソフトを選んではどうでしょう。そして、そうでなくとも紙を使ってしまえば十分過ぎることも多々あります。

作り方は人それぞれ、最も効率がいいと思う方法を見つけて下さいね。

回答No.6

神崎 渉瑠（@taloo）

連続失礼。
補足として。

下書きナシでいきなりHTMLを書き出す、という人も多いと思いますが、
そう言う人は「頭の中で完成図を描いている＝それが下書き」ですから、
「頭の中で下書きを書く（想像する）」ということをしているはずです。

color: #66cc00;
と書いて何色になるか、想像できますか？

それが出来るようになれば、いきなりHTMLを書き出しても良いと思いますが、
私は鉛筆などで下書きするとか、ドロー系ソフトでパーツを並べたり、色を見比べたりするところから始めるのが良いと思います。

回答No.5

神崎 渉瑠（@taloo）

下書きは紙と鉛筆、またはFireworksです。
ドロー系ソフト（パーツを移動しやすい）であればイラストレーターでもWordやPowerpointでも良いと思います。
Photoshopなどのペイント系ソフトなら、レイヤーが使えればパーツごとにレイヤーを割り当てることで代用できると思います。

レイアウトだけ決めて、色づけなどは直接CSSを書くところから始めることもありますが、
HTMLを作成する前に、デザイン案として提案することもありますので、そういう場合はHTMLを作成することはありません。
（「商品」がHTMLデータですから、そのデータを持ち逃げされないようにするなどの理由もあります。）

http://sozai.wi-wi.jp/coding-guide/?cat=3

> 横幅はおさまらない時があるような気もします。

どうせブラウザで見ても、ウインドウサイズを小さくすれば収まることはありません。
横スクロールを出すか、二段に表示させるなど、ほかの方法を採るべきだと思います。

そういうのが嫌なら、Wordファイルのまま、Powerpointファイルのまま掲載すべきだと思います。

回答No.4

BellBell

本当に『下書き』という意味では、紙に書きますね。

『下書き』とはちょっと違うかも知れませんが、最初にPhotoshopやIllustrator、FireWorksなど(広義に画像デザインソフトとでも言えばいいですかね？)を使って、デザインを起こすと同時に画像素材の作成をしますね。
サイトロゴやボタン、タブなどの画像を作りながら、画面デザインも完成させるって感じです。

次に、その画像を切り出して、画面デザインを元にホームページ作成ソフトでHTMLを完成させます。
ホームページ作成ソフトはテキストさえ書ければ良いので、メモ帳でも充分。
DreamWeaverもよく使われますが、HPビルダーでも充分。

特にデザイナとコーダ(HTMLを書く人)の分業を目的とする場合の手法ですが、一人で作る場合でも、HTMLの作成と画像の作成とを行ったり来たりしない(回数を減らす)ためにも、有効な手法じゃないかと思います。

Photoshop、illustrator、FireWorksがよく使われるのは、画像の切り出し枠を作って保存しておけるので、連携しやすいとか、後から修正が非常に楽って理由です。
3つのうちどれを使うかってのは、そのデザイナが一番得意なものを選択する事になるんじゃないですかね(たぶん)。

ま、ワードが得意なら、一旦ワードですべて作って、その下書きを元にHTMLコーディングって作業をするのもありだと思います。
表示メニュー内から、『印刷レイアウト』ではなく『Webレイアウト』を選ぶなどすれば、見た目の問題は回避できると思いますし。
たぶん、その方が短時間で完成度の高いものができるでしょう(あくまでワードが得意であれば)。

同じように、パワーポイントが得意だぜ!!って事であれば、一旦パワーポイントで作るのもありだと思います。

一旦完成見本を作ってからHTMLコーディングする方が、最初のうちは簡単だと思いますので。

回答No.3

ORUKA1951

お仕事なので、基本的な作業は
テキストはテキストエディタでとにかく書きます。Wordなどで作成してあるデータもHTMLにするときは、裸のテキストにいったんしてしまいます。

　そのあとで、段落ごとにテンプレートがあればそれに流し込んでいきますし、なければマークアップしていきます。

　画像などは最後に、入れ込んでいきます。

＞写真とか文章、リンク、ボタンを配置すると１枚のページに綺麗におさまりきらないのではないでしょうか
　これは誤解ですから、発想の転換が必要。
　HTMLは、幅の狭いディスプレイ、広いディスプレイ、画像を読みないブラウザや読み上げソフト、さらには点字端末や読み上げソフト、そして重要な検索エンジンが利用できなければなりませんから、・・・というかそのための仕様がHTMLなので・・・基本的に固定された配置はしないものです。する人もいるけど。

回答No.2

noname#242220

テーブルタグを使用して造るので有ればレイアウトを考慮する必要が有るでしょうが、
レイヤーシートで造るとすれば下書きは不要ですね。
（現在全面テーブルタグでのレイアウトは避けるべきと言われてます）

回答No.1

noname#145943

下書き段階のものはアップせずにローカル内で閲覧/編集をすればいいだけです。わざわざ別のアプリケーションを使用する必要は全くありませんので、本番に使用するアプリケーションをそのまま使ってください。

>何か下書きのような物を作成すると作業効率が上がると思うのですが
二度手間というものはどの世界でもとても非効率のような気がします。