- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!WEBサイト制作情報
WEBサイト制作において便利そうなものをメモしておきます。
!!ホームページ制作入門＆HTMLタグ・CSS検索
デジタル系クリエイターであれば、HTMLくらいは書けるようにしたいですね。全然難しいものではないので、少し勉強しながら作れば誰でもHTMLは書けます。一から勉強したいなら、[とほほのWWW入門|http://www.tohoho-web.com/]がおすすめです。
*[とほほのWWW入門|http://www.tohoho-web.com/]
**WEB作成に関する様々なことを調べられるサイト。CGIやJAVAなども扱っている。
**ホームページ制作入門の老舗です。「[ホームページ入門|http://www.tohoho-web.com/wwwbeg.htm]」が有名なコンテンツです。しかし、CSSについてあまり言及されておらず、古い考え方の記述方法かもしれませんが、基本はわかると思います。HTMLで作れるようになったら、ぜひCSSもマスターしてください。
*[ごく簡単なHTMLの説明|http://www.kanzaki.com/docs/htminfo.html]
**全くの初心者の人は、[30分間(X)HTML入門|http://www.kanzaki.com/docs/html/lesson1.html]から読んでみてください。それで基本はOKです。
*[TAG<index>|http://tagindex.com/]
**知りたいタグをすばやく探せるサイト。CSS、JavaScriptも検索できる。
*[HTMLクイックリファレンス|http://www.htmq.com/]
**HTML作成時に役立つを情報を検索できるサイト。タグ、CSS、WEBカラー、優良デザインサイトなどが調べられる。
*[CSS Validator|http://jigsaw.w3.org/css-validator/]
**URLを入力すると、正しいCSSの構文かどうかチェックできる。
*[Another HTML-lint|http://openlab.ring.gr.jp/k16/htmllint/]
**HTMLの文法が正しいかどうかチェックしてくれるサイト。
*[W3C|http://www.w3.org/]
**WEB技術の標準化を行う団体「World Wide Web Consortium」の公式サイト。
!!ホームページに一工夫を
*「[Lightbox|http://www.lokeshdhakar.com/projects/lightbox2/]」
**画像ファイルをかっこよく演出するスクリプト
*「[Videobox|http://gigazine.net/index.php?/news/comments/20071023_videobox/]」
**FlashやムービーファイルをLightbox風に表示するスクリプト
*「[dfGallery 2.0|http://dezinerfolio.com/dfgallery-2/free-flash-gallery]」
**上のLightboxのように画像を閲覧することができるフォトアルバムのFlashファイルです。フリーで使用でき、高機能です。[日本語の情報はこちら|http://gigazine.net/index.php?/news/comments/20090125_dfgallery/]。
*[HTMLエンティティ化|http://hp.vector.co.jp/authors/VA022023/javascript/make_html_entity-ja.htm]
**ホームページに公開するメールアドレスなどを広告業者に収集されるのを防止するためのソフトウエアです。
*[MyCSSMenu.com|http://www.mycssmenu.com/]
**ホームページの上段や左側に設置するメニューをCSSで生成してくれるWEBサービス。
*[10 Beautiful Wordpress Gallery Themes|http://design-develop.net/wordpress/10-beautiful-wordpress-gallery-themes.html]
**ギャラリーサイト、ポートフォリオサイトに最適な[Wordress|http://ja.wordpress.org/]用テーマ集
*[ダウンロード後すぐに活用できるFlash写真ギャラリーサイト|http://forty-n-five.boy.jp/blog/2009/02/flash_4.php]
*[WEBデザインの品質をあげるテクニック集|http://design-develop.net/web-design/how-to-spot-quality-within-web-design-examples-tips.html]
*[The Best Icons Always at Your Fingertips|http://www.webiconsets.com/]
*[30 Must See Web Generator for Lazy Webmasters|http://www.webhostingsecretrevealed.com/featured-articles/30-must-see-web-generator-for-lazy-webmasters/]
**WEBサイト制作に使うパーツ類を作れるオンラインのサービスをいろいろ紹介してます。タブ画像、アイコン、背景のグラデーションなどなど。
!!WEBポートフォリオ集
*[50 Inspiring Portfolio Designs|http://goo.gl/PYyZ]
*[50 Beautiful and Creative Portfolios|http://www.webdesignbooth.com/50-beautiful-and-creative-portfolios/]
*[50 Beautiful And Creative Portfolio Designs|http://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/]
*[50 Creative and Inspirational Personal Portfolio Websites|http://speckyboy.com/2009/07/07/50-creative-and-inspirational-personal-portfolio-websites/]
**デザイナーのWEBポートフォリオを集めた記事。参考になります。
!!Flashについて
いまや当たり前のようにFlashがWEBサイトに組み込まれる時代です。
Flashについて、基本的なところから学んで行く連載記事が[マイコミジャーナル|http://journal.mycom.co.jp/]ではじまっています。
第一回目はFlashが現在までどのような経緯で開発されてきたか、その歴史についてです。
*[【コラム】クリエイティブ初心者のためのＦｌａｓｈ講座|http://journal.mycom.co.jp/column/flashkouza/index.html]
!その他、ニュースサイト等で紹介されているFlash関連記事です。
*[Flashを使った高機能で見栄えのするスライドショーが設置できる「WS-Slideshow」|http://gigazine.net/index.php?/news/comments/20080206_ws_slideshow/]
*[Flashで動作する3Dエンジン「Papervision3D」|http://gigazine.net/index.php?/news/comments/20070212_papervision3d/]
*[Flashできれいなパイチャートや円グラフを無料で作る「amCharts」|http://gigazine.net/index.php?/news/comments/20061227_amcharts/]
*[Flashできれいな円グラフを作る「amCharts」で折れ線グラフや面グラフが可能に|http://gigazine.net/index.php?/news/comments/20070315_amcharts_linearea/]
*[Flashで物理演算シミュレーションを可能にする「Box2DFlashAS3」|http://gigazine.net/index.php?/news/comments/20071118_box2dflashas3/]
*[SWFObject|http://blog.deconcept.com/swfobject/]
**[Flash画面をIEで見たときにワンクリックしなくても済むjavascript|http://forty-n-five.boy.jp/blog/2008/12/flashiejavascript.php]
!!他、ネット上で見つけたWEB制作関連記事
!CSS関連
*[99 High-Quality Free (X)HTML/CSS Templates|http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/]
*[9 Beautiful Free CSS Web Templates|http://www.crazyleafdesign.com/blog/9-beautiful-free-css-web-templates/]
*[101 High Quality CSS And XHTML Free Templates And Layouts: Part 1|http://www.1stwebdesigner.com/resources/101-high-quality-css-and-xhtml-free-templates-and-layouts-part-1-2/]
*[101 More Quality CSS, XHTML Free Templates: Part 2|http://www.1stwebdesigner.com/resources/101-more-quality-css-xhtml-free-templates/]
*[Best Free Templates|http://www.bestfreetemplates.info/]
*[CSSデザイン格付けサイトいろいろ|http://gigazine.net/index.php?/news/comments/20060920_css_design/]
*[ブログのCSSデザイントップ20|http://gigazine.net/index.php?/news/comments/20060708_blog_css_top20/]
*[100％、CSSのみで構成されるメニューの作り方|http://gigazine.net/index.php?/news/comments/20060728_purecss/]
*[ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」|http://gigazine.net/index.php?/news/comments/20060724_css_adxmenu/]
*[CSSで角をもっと丸くする方法いろいろ|http://gigazine.net/index.php?/news/comments/20060525_rounded_corner_css/]
*[無料で200個以上のウェブサイトテンプレートを配布する「OpenDesigns.org」|http://gigazine.net/index.php?/news/comments/20070215_opendesign/]
*[ダーク系配色のデザインを採用しているサイトいろいろ|http://gigazine.net/index.php?/news/comments/20070114_dark_design/]
*[スタイルシートをすっきりと見やすくしてくれる『styleneat』|http://www.100shiki.com/archives/2009/03/styleneat.html]
!その他
*[ウェブサイトのデザインプロセスをGIFアニメーションで追ってみる|http://gigazine.net/index.php?/news/comments/20061127_designline/]
*[秀逸なユーザビリティのボタンをデザインするための5つの秘伝|http://gigazine.net/index.php?/news/comments/20090106_action_buttons/]
*[グラデーションを使ったデザインのやり方|http://gigazine.net/index.php?/news/comments/20070310_gradation_correct_answer/]
*[ダウンロードしてすぐに使えるPhotoshopのPSDファイルを無料でゲットできるサイトいろいろ|http://gigazine.net/index.php?/news/comments/20090106_high_quality_psd/]
*[WEB背景素材集へのリンク|http://speckyboy.com/2009/01/05/36-must-have-backgrounds-and-patterns-resources-for-all-designers/]
*[ドリームウィーバーでhtmlテンプレートを作る方法|http://forty-n-five.boy.jp/blog/2009/01/html.php]
*[スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」|http://gigazine.net/index.php?/news/comments/20080208_fancyzoom/]
*[実際にスクロールするまで画像を読み込ませない「Lazy Load Plugin for jQuery」|http://gigazine.net/index.php?/news/comments/20070911_lazy_load_plugin_for_jquery/]
!!WIKI（ウィキ）
WEB上の記事をWEBブラウザを使って記述することができるシステムです。自分のIDとパスワードでログインすることで記事編集やページ編集ができるようになっています。ブログなどと比べるとはるかに自由度が高いです。
Wikiはネットに接続できればどこでも記事編集ができるので、情報をまとめたり、複数のメンバーでWEBサイトを作ったりするのに向いています。さらに記述言語がオーソドックスなので、だいたいどのOSからでも見ることができます。
Wikiをポートフォリオとして機能させるのも無理ではありませんが、デザイン面をあまり自由にいじれないという弱点もあります。このサイト（講義まとめWiki）はFreeStyle Wikiで作成しています。
*[Wikipedia（Wikiで検索）|http://ja.wikipedia.org/wiki/Wiki]
*[FreeStyle Wiki|http://fswiki.org/]
*[PyukiWiki|http://pyukiwiki.sourceforge.jp/]
*[＠Wiki（アットウィキ）|http://atwiki.jp/]
*[livedoor Wiki|http://wiki.livedoor.com/]
*[TimWiki|http://www.timwiki.net/intro/]
*[TiddlyWiki|http://www.tiddlywiki.com/]
**[日本語紹介記事|http://www.itmedia.co.jp/bizid/articles/0703/16/news142.html]
*[Luminotes|https://luminotes.com/]
**[日本語紹介記事|http://www.itmedia.co.jp/bizid/articles/0809/17/news073.html]
!!Blog（ブログ）
ブログは日記や最新情報、ニュースなどを掲載するのに向いています。
ですから、ポートフォリオなどにはあまり向いているとは言えませんが、ものすごくお手軽にWEBサイトが作れるのでHTMLがまったくわからないし勉強する気もないという人はとりあえずブログで作ってしまうという手もあります。
最近は、大手のプロバイダであれば、大抵はブログサービスを導入してますので、うまく使えば有効かもしれません
*[Wikipedia（Blogで検索）|http://ja.wikipedia.org/wiki/Blog]
*[Wikipedia(コンテンツマネージメントシステム)|http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0]
!無料ブログサービス
プロバイダなどが提供しているもので、インストールなどの設定は必要なくすぐにブログサイトを構築できます。あらかじめデザインのテンプレートが用意されており、好きなものを選べるようになっているものが多いです。お手軽なのですが、逆に言うとテンプレート以外のものは作れないです。
有名なところは、このあたりでしょうか。
*[アメーバブログ|http://www.ameba.jp/]
*[livedoor Blog|http://blog.livedoor.com/]
*[FC2ブログ|http://blog.fc2.com/]
*[Blogger|http://www.blogger.com/]
*[はてなダイアリー|http://d.hatena.ne.jp/]
他にもたくさんのブログサービスがあります。[こちら|http://ja.wikipedia.org/wiki/Blog#.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9.E3.82.B5.E3.82.A4.E3.83.88]を参照してください。
![Movable Type|http://www.sixapart.jp/movabletype/]
自分でスクリプトをサーバーに設置して使うタイプです。ブログに限らず、これで構築すればサイト全体を一括管理することができるようになります。かなり自由にカスタマイズできますので、デザインを作りこみたい人はこちらがオススメです。商用利用などは有料ですが、個人利用であれば無料で使用できます。
![Wordpress|http://ja.wordpress.org/]
*上のMovableTypeと同様、ブログ・CMSサイトを構築できるオープンソースのプラットフォームです。無料で使用することができます。Wordpress用のプラグインやテーマがいろいろ配布されているので、それらを使うことでより手軽に本格的なサイト構築を行うことができます。
*[ギャラリー＆ポートフォリオ用テーマ その１|http://design-develop.net/wordpress/10-beautiful-wordpress-gallery-themes.html]
*[ギャラリー＆ポートフォリオ用テーマ その２|http://www.smashingmagazine.com/2009/05/04/download-gallery-a-free-wordpress-theme/]
*[Free WordPress Theme: Empty Canvas|http://rubiqube.com/free-wordpress-theme-empty-canvas/]
**カスタマイズのためのベースに便利なシンプルなテーマ。
*[40 stylish minimal and clean free wordpress themes|http://speckyboy.com/2009/04/20/40-stylish-minimal-and-clean-free-wordpress-themes/]
**カスタマイズのためのベースに便利なシンプルなテーマ。40種類。
*[100 Amazing Free Wordpress Themes for 2009|http://www.smashingmagazine.com/2009/05/18/100-amazing-free-wordpress-themes-for-2009/]
*[10 Wonderful WordPress Templates That are Setting Trends|http://blog.themeforest.net/general/10-wonderful-wordpress-templates-that-are-setting-trends/]
**10個のWordpress用テーマ
*[15 Super Featured Free Wordpress Themes|http://hiddenpixels.com/designer-and-developer-resources/super-featured-free-wordpress-themes/]
**Wordpress用テーマ15種
*[20 free Wordpress themes with premium-like functionalities|http://designreviver.com/freebies/20-free-wordpress-themes-with-premium-like-functionalities/]
**Wordpress用テーマ20種
*[20+ Free and Stylish Typography Wordpress Themes|http://speckyboy.com/2009/08/21/20-free-and-stylish-typography-wordpress-themes/]
*[43 Free Wordpress Themes that Look Totally Premium|http://loreleiwebdesign.com/2010/01/13/43-free-wordpress-themes-that-look-totally-premium/]
**Wordpress用テーマ43種
*[Noupe(Wordpressのページ)|http://www.noupe.com/category/wordpress]
*[AdminWeb|http://www.adminweb.jp/]
**上に紹介しているMovableTypeやWordpressなどの使い方について説明されているサイトです。
*[30Wordpress Development Tutorials|http://www.problogdesign.com/resources/30-wordpress-development-tutorials/]
**Wordpressをカスタマイズする３０のチュートリアル集
![Jimdo|http://jp.jimdo.com/]
*無料でホームページを作成できるサービス。かなり簡単に高機能なWEBサイトを作成できます。詳しくは、[こちらの動画|http://www.youtube.com/watch?v=peSkhkUtuKQ]を見てみてください。
*[ためしにこのサービスを使ってWEBサイトを作ってみました|http://nekirom.jimdo.com/]。見てもらうとわかりますが、ページの下の方に画像閲覧用のサムネイルが並べてあります。クリックすると、大きく拡大表示されます。「[Lightbox|http://www.lokeshdhakar.com/projects/lightbox2/]」と同じ機能ですが、標準でこの機能がついていました。お手軽にイメージギャラリーサイトを作るのにも便利です。
!!WEB作成に便利なソフトウェア
業務では、Dreamweaverなどの市販されているソフトを使うのが一般的ですが、元々、HTMLやCSSはメモ帳などでタグを手書きしても作れるものです。市販されているものを使わなくても何も問題ありませんが、大きさ、色の指定、レイアウトなど見た目がわからないと効率が悪いので、Dreamweaverなどで作業しているわけです。
しかし、手書き派の人を援助するフリーソフトがいろいろ配布されています。Vectorなどのフリーウェア・シェアウェア配布サイトにいけばHTMLエディタなどの便利なソフトがいろいろあるので、使いやすいものを選んで使うといいと思います。もちろん、メモ帳などで書いてもいいのですが、タグをいちいち書くのは大変なので、実際に作成するときは、HTMLタグを半自動的に書き込んでくれるこれらのエディタは大変便利だと思います。HTMLの基本を学んだら積極的に使ってみてください。
*[【Vector】Windows用HTML作成ソフト ページ|http://www.vector.co.jp/vpack/filearea/win/net/htmledit/]
*[FFFTP|http://www.vector.co.jp/soft/win95/net/se061839.html]
**標準的なGUIを採用した、わかりやすいFTPクライアントソフト
*[【Vector】Macintosh用HTML作成ソフト ページ|http://www.vector.co.jp/vpack/filearea/mac/net/htmledit/]
*[Jedit4.0|http://www.vector.co.jp/soft/mac/writing/se163485.html]
**Mac定番テキストエディタ
*[【窓の杜】フォトアルバム作成ソフト|http://www.forest.impress.co.jp/lib/inet/homepage/webalbum/]
**たくさんの画像を閲覧するフォトアルバムページを作ってくれるソフト。大量に画像を見てもらうためにたくさんHTMLページを作るのは大変です。これらのソフトはそういうときに便利。仕事でCD-Rに入れたたくさん画像を解説付きで見てもらいときなどにも便利。
*[【窓の杜】ブログエディター|http://www.forest.impress.co.jp/lib/inet/homepage/blogeditor/]
**ブログ記事編集専用のソフトウェア。ブログ風にページを作成してサーバーにアップロードするタイプのものなどもある。使用しているブログの編集機能が気に入らない場合は便利です。
!!サーバー
インターネット上でホームページを作るには、どこかにサーバースペースを持たなければならないですが、サーバーを持つ方法は3種類考えられます。
+有料のサーバーを使う（広告が入らないし、サービスも充実）
+無料のサーバーを使う（広告が入る）
+自分でサーバーをたてる（常時PCを起動し続ける必要があり、ネットワークやセキュリティについての知識も必要）
個人的に、一番オススメは有料サーバーです。広告が入るとやはり安っぽい感じがでますし、レイアウトにかなり制限がかかります。広告などが入ってもいいよ、というのであれば、無料サーバーでもいいかもしれません。自前のサーバーについてですが、この選択をする人であれば、僕があれこれ言う必要はないでしょう。
いくつか、サーバーを紹介しておきます。この他にもアクセスプロバイダ（so-netとかOCNとか）もインターネットアクセスのサービスの一つとして、サーバースペースを提供してるはずなので、自分が利用してるプロバイダのサービスを使ってもいいと思います。CGIが使えるかどうか、などサービス内容をよく見て選んでください。
*[Sakura Internet|http://www.sakura.ad.jp/]
**僕が借りてるレンタルサーバーの会社です。有料レンタル。
*[ロリポップ！|http://lolipop.jp/]
**ここも有料レンタルです。
*[infoseek isweb|http://isweb.www.infoseek.co.jp/]
**有料と無料を選べます。
*[Google Page Creator|http://pages.google.com/]
**Googleの無料ホームページ作成サービス。
**ブラウザ上で作業します。いくつかの雛形から選んで、そこにテキストや画像をはめ込んでいく手順になります。かなりお手軽にホームページの体裁を作ることができますが、単純にテキストと画像ファイルだけで構成されてるようなものしか作れません。Flashやムービーファイルを組み込むのはまだ無理そうです。凝ったものを作るというよりは、手間をかけずに急ぎでホームページを作らないといけない、というときにはサクっと作れて、独自のドメインも持てるので便利なサービスだと思います。ちょっと動作が不安定でよく落ちます…。
**[試しに作ってみました|http://watersky.jp.googlepages.com/home]
*[自宅サーバーを構築しよう|http://win.kororo.jp/]
**自宅サーバの作り方について解説してるサイトです。
!!Googleサービス
直接ホームページ作成に関係するのは、BloggerとGoogle Page Creatorあたりだと思いますが、便利なサービスが多いので、Googleアカウントを取って有効利用すれば仕事効率も飛躍的に上がるでしょう。
*[Google|http://www.google.com/]
*[Blogger|http://www.blogger.com/]
**無料のブログサービス
*[Google Page Creator|http://pages.google.com/]
**無料のホームページ作成サービス。非常に簡単にWEBサイトが作れます。
*[Gmail|http://mail.google.com/]
**無料のオンラインメールサービス。
*[Googleドキュメント|http://docs.google.com/]
**オンラインのワープロ・表計算・プレゼン作成サービス。Excelの簡易版のようなものです。
*[Googleグループ|http://groups.google.com/]
**オンラインのグループウェア。メンバーだけが閲覧できるWEBページやメーリングリストなどが作れます。CGクラスで使っているMLがこれです。
*[Google SketchUp|http://sketchup.google.co.jp/]
**無料の３ＤＣＧモデリング用ソフト。直感的な操作でＣＧモデルを作成できる。
