Webサイトを作成する前のイメージ図の作り方

質問

1人でWebサイトを作ってるのですが、コーディングする前のイメージ図を明瞭にするのが面倒です。

というのも、私はフォトショップで例えばカンバスサイズを横900px、縦3000pxにし、そこに一つ一つパーツや文章を作ってイメージ図を完成させてます。

この場合、PCが重くなって、操作が遅くなるため、頭の中の思考の効率が悪くもなります。

私が使っているPCは2年前にドスパラで本体のみで5万円くらいで購入した物です。　
10万円くらいの性能の良いPCを購入すれば問題は解決できますでしょうか？

それともフォトショップでイメージ図を作成する方法が間違っているのでしょうか？
何か別なソフトでも利用するべきなのでしょうか？

回答No.3

sunwarship · ベストアンサー

解決しますよ。でも10万くらいのじゃまたすぐ同じになるかと。。。
高いのが難点ですがクリエイター向けのPCにしとけば問題なくサクサクです。

DELLの　Graphic Pro や
http://www.dell.com/jp/p/deals.aspx?c=jp&l=ja&s=dhs&#!dlpgid=graphic-pro-deals&&ST=dell&dgc=ST&cid=33420&lid=786910&acd=1059166192234149

mouse computerのクリエイターPCなど。。
http://www.mouse-jp.co.jp/abest/creator/

本題。イメージ図ですが、
> そこに一つ一つパーツや文章を作ってイメージ図を完成させてます
こうなるとイメージというより、デザインですよね。

やり方は人それぞれ異なりますし自分が効率良い方法を探っていけば
自然と一番の方法にたどり着くかと思います。

全ページデザイン起こしてからコーディングに移る人もいれば
トップ＋中1ページのデザインのみ作成して後はコーディングしながら組み込んでいくなどなど、

クライアントに全ページデザイン見せて！と言われれば嫌でも作りますし。笑
時と場合や気分と案件によってやり方変えてもいいと思います。

Photoshop以外はないと思ってます。

余談ですが、試してませんでしたらメモリ不足も考えられますので
環境設定 > パフォーマンス > メモリの使用状況でphotoshopで使う容量とか設定できますので
現PCでも試してみるのもありかと思います。

お礼

参考になるご回答ありがとうございます。これから自分に合う作り方を上達していきます。

回答No.2

ORUKA1951

今後はその方法は通用しなくなりますよ。
大事なことなので、ちょっと説明しておきます。
　HTML2～3のあたりで、HTMLの貧弱なデザイン能力は、HTMLの出自である科学技術分野でよくても一般には不満足でした。
　そのため、色々工夫がされたのですが、HTML本来の目的である「HTMLは、どんな環境からもWebの情報を利用できるようにすべ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」とは反するものになってしまいました。
・ウィンドウ巾が違うとスクロールしなければならなくなる。
・印刷ができない
・視覚障害者向けのスクリーンリーダーや点字端末で利用できない
★検索エンジンにページの内容が理解できない

　その反省から!!、HTML4.01が今から１５年前に勧告されました。そのスタンスは「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。その仕様には
strict:厳密型--デザインにかかわる一切の要素や属性は含まない
transitional:移行型---デザイン的な要素や属性を残したもの
frameset:いわゆるフレーム
の三種があり「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」とされ、将来のバージョンではstrictのみになると宣言されました。
　先日勧告になったHTML5では、デザインにかかわる一切の要素や属性は含みません。
すなわち
★HTMLでは、デザインに関わる事は一切書かず、ひたすら文書構造だけをマークアップし、デザインはスタイルシートにすべて任せます。
　すなわち、あらかじめデザインを決めてHTMLを書き始める事はなくなるという事です。

　下記で実例を紹介しますが、そのサイトに言ってブラウザ(chromeは除く)の[表示メニュー]から「スタイル(シート)」に進み、色々なスタイルを選択してみてください。
　HTMLソースを確認されても良いでしょう。
　そしてウィンドウ巾を変えたり、印刷プレビュー(印刷時の状態)やスタイルなし(検索エンジンや携帯電話、展示端末やスクリーンリーダーが見ている姿)も確認する。
・ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

　このサイトは、まず文書構造だけをHTMLで書き上げて、その後スタイルシートを書いてデザインして行ったものです。
　HTMLのマークアップは極めてシンプルで文書構造しか書かれていないために、あとあとHTMLの内容が変わってもメンテナンスに困りません。デザインもこのように自在に変更できます。

＞フォトショップで例えばカンバスサイズを横900px、縦3000pxにし、そこに一つ一つパーツや文章を作ってイメージ図を完成させてます。
　という面倒な方法ではなく、HTMLの文書構造に基づいてデザインを後からする。気に喰わなければ、いつでも変更できる。HTMLに手を加えなくても。

回答No.1

qualheart

＞10万円くらいの性能の良いPCを購入すれば問題は解決できますでしょうか？

できると思いますよ。
デザインはやっぱりPhotoshopで作るのが一番だと思います。
わたしはPhotoshop CCを使ってますが、COREi5 1.8GHzのノートPCでも問題なく動いてます。

ご参考まで。