最近多く見かけるサイトデザインなのですが、これはどのような言語で書かれ

質問

最近多く見かけるサイトデザインなのですが、これはどのような言語で書かれているのでしょうか？
なんというデザインなのでしょう？
難易度的には高いのでしょうか？　topページに画像がたくさん並んでいるデザインです。

http://www.d-department.com/jp/

http://www.baycrews.co.jp/index.html

私は元々グラフィックデザインをやっており、画像の編集・加工は仕事でやっていました。
Photoshopやイラストレータなどはふつうに使えます。
Webのプログラミングはあまりやっていなかったのですが、以前Windows系の仕事でVisuial Basic等のプログラミングの経験もあります。

しかし５年ほど前に会社を辞め、自分でホームページを作成して起業し販売業となった結果、
逆にWebそのものの技術については疎くなってしまい、よくわかりません。

環境的にも何か必要なものとかあるのでしょうか？
現在、ホームページ作成にはAdobe Dreamweaverを使ってます

回答No.4

LOHA · ベストアンサー

>最近多く見かけるサイトデザインなのですが、これはどのような言語で書かれているのでしょうか？
なんというデザインなのでしょう？

画像が並んでいることに関しては特にデザイン名などはないかと思いますが、１番目のように横に広がっても自然なサイトはリキッドデザインと言われたりします。
２番目は…固定幅デザインでしょうか（笑）。
どちらのサイトもHTMLとJavaScript、あとツールに関してのある程度の知識がないと難しいです。

ソースコードをちょっと覗いた限りですが、
１番目のサイトはMovable Typeというブログツールを使っています。
２番目のサイトは手打ちかと思います。

最近では、上記ブログツールのような類の、いわゆるCMSというモノを使うのが一般的です。CMSを利用することで同じようなことを書く労力を減らし、管理しやすく、またプラグインなどによる拡張（ショップ機能など）性の高いサイトを構築することが可能になります。
上記のMovable Type(MT)は商用はライセンスが必要ですが、それでもWeb作成会社では一番利用されているかと思います。
ブログCMSとしては商用問わず無料のWord Press(WP)がシェアが一番高いでしょうか。

CMSなしにログインやショッピング機能のような動的なサイトを作りたいなら、HTMLと併せてCGIでPerlなどを使うか、PHPやRubyなどを使うことになるかと思います。
この場合でも、それなりの規模になるのであれば、CakePHPやRoRなどのフレームワークを使うのが主流かと思います。また、やはりデータベースの知識も必要でしょう。

もちろん２番目のように手打ちすることもあります。
静的なサイトですが、JavaScriptを駆使することで、アレだけの表現が可能となっています（一昔前ならFlashが使われてたところです）。

>環境的にも何か必要なものとかあるのでしょうか？

Adobe製品であればフラッシュを使うならAdobe Flashが、デザイン向きとしてはPhotoshopと併せてFireworksがあると良いかと思います。

あとは、とにかく知識でしょうか（笑）。最低限HTMLとJavaScriptは必須でしょう。
今やデザインとコーディングは分離してやる時代なようなので、独りで何もかもやるには、やはり膨大な知識が必要となるかと思います。

動きの多いページやオンラインショップなどの高機能を求めているなら、お金に余裕があれば委託するのが無難かと思います。デザインや素材を与えての製作も可能かと思います。

以上、参考になったら幸いです。

お礼

ありがとうございます。
両者で組み方が違うのですね。
JavaScriptであれだけできるのですか。。。
トライしてみます

回答No.3

noname#119957

ブログのカスタマイズに見えます。
記事の一部をTOPページに表示しているようです。

回答No.2

兼元 謙任（@kanekaneto）

昔、ちょっとだけHTMLデザイナーをしていたことがあります。今はその道の専門家ではありませんが、答えさせていただきますね。ちなみに、私も主にドリームウィーバーで作成していました。

ブラウザのメニュー「表示」の「ソース」をみると、
XHML DTD（ 文書型定義 ）ですが、特別なことはしていないような気がします。
CSS（見栄えを定義する書式）でレイアウトをきめていて、ジャバスクリプトで他のデータを呼び出したり、画面変化を定義づけています。

商品のデータベースを別にもっていて、それをよびだしながら、ダイナミックにページを生成しているのでしょう。

カリモクさんですから、そこにはそれなりのシステムをつくっていると思います。

言語的にはどんな言語でもこのページを実現できるとおもいますが、いまどきは、PHPを使っているのではないでしょうか。大掛かりなシステムをくんでいるのならjaveやC#なんかつかっているかもしれません。

データベース（商品の写真、スペック、ユーザー情報など）をベースにして、ページをつくるとなると、専門的なプログラマーさんをいれたほうがいいかもしれませんね。

最近のWeb構築については、多様化していますが、基本は同じです。
見栄え（レイアウトや色）は、イラストレーターやフォトショップでデザインし、HTMLやCSSを別に定義して、データーベースとの連携は、専門のプログラマーの方にお願いすることで実現できます。

Webを通して販売をされているようですが、ぜひがんばってくださいね。

ECサイトの解説をしてくださっているブログを紹介させていただきますね。
http://xp1.saku-saku.co.jp/modules/wordpress/index.php?p=10

参考にしていただければ幸いです。

参考URL：

http://xp1.saku-saku.co.jp/modules/wordpress/index.php?p=10

お礼

ご丁寧にありがとうございます。URLも参考になっています。

回答No.1

machua

WEBに特化した言語(PHP,Ruby,Pythonあたり)であればどれでもいけると思います。
また動的な情報が不要であれば、HTML＋CSSでいけるかと。

>なんというデザインなのでしょう？
わかりません。

>難易度的には高いのでしょうか？
基本的にデザイン(画面開発)からすると、HTML（主にDIVタグ）＋CSS＋Ajaxの知識が必要で、Ajaxはおそらくモジュールを使うことになると思いますが、種類＋機能があるので難易度は高いと思われます。Ajaxは基本的にJavaScriptですが、これは動きのある（いろんな意味で楽しめる）サイトを作成できます。また動的なサイト（DBから情報引っ張るなど）の場合、フレームワークを使うと比較的楽に作成できますが、フレームワークの学習が必要になるでしょう。

>環境的にも何か必要なものとかあるのでしょうか？
デザインだけであれば、Adobe Dreamweaver(ほとんど使用したことありません)なりメモ帳、ブラウザでいけるはずです。言語から始めるための環境については、好みや経験（xampp,aptana,Linuxなど）もあり長くなるので割愛します。デザイン的には、オープンソースのWEBプログラム（WordPressやZenCartなど）を構築してみたり、Ajaxについて書かれたサイトが参考になるかもしれません。