トップ 差分 一覧 Farm ソース 検索 ヘルプ RSS ログイン

WEB site study

WEBサイト制作情報

WEBサイト制作において便利そうなものをメモしておきます。

 ホームページ制作入門＆HTMLタグ・CSS検索

デジタル系クリエイターであれば、HTMLくらいは書けるようにしたいですね。全然難しいものではないので、少し勉強しながら作れば誰でもHTMLは書けます。一から勉強したいなら、とほほのWWW入門がおすすめです。

  • とほほのWWW入門
    • WEB作成に関する様々なことを調べられるサイト。CGIやJAVAなども扱っている。
    • ホームページ制作入門の老舗です。「ホームページ入門」が有名なコンテンツです。しかし、CSSについてあまり言及されておらず、古い考え方の記述方法かもしれませんが、基本はわかると思います。HTMLで作れるようになったら、ぜひCSSもマスターしてください。
  • ごく簡単なHTMLの説明
    • 全くの初心者の人は、30分間(X)HTML入門から読んでみてください。それで基本はOKです。
  • TAG<index>
    • 知りたいタグをすばやく探せるサイト。CSS、JavaScriptも検索できる。
  • HTMLクイックリファレンス
    • HTML作成時に役立つを情報を検索できるサイト。タグ、CSS、WEBカラー、優良デザインサイトなどが調べられる。
  • CSS Validator
    • URLを入力すると、正しいCSSの構文かどうかチェックできる。
  • Another HTML-lint
    • HTMLの文法が正しいかどうかチェックしてくれるサイト。
  • W3C
    • WEB技術の標準化を行う団体「World Wide Web Consortium」の公式サイト。

 ホームページに一工夫を


 WEBポートフォリオ集


 Flashについて

いまや当たり前のようにFlashがWEBサイトに組み込まれる時代です。
Flashについて、基本的なところから学んで行く連載記事がマイコミジャーナルではじまっています。
第一回目はFlashが現在までどのような経緯で開発されてきたか、その歴史についてです。


その他、ニュースサイト等で紹介されているFlash関連記事です。


 他、ネット上で見つけたWEB制作関連記事

CSS関連

その他


 WIKI（ウィキ）

WEB上の記事をWEBブラウザを使って記述することができるシステムです。自分のIDとパスワードでログインすることで記事編集やページ編集ができるようになっています。ブログなどと比べるとはるかに自由度が高いです。

Wikiはネットに接続できればどこでも記事編集ができるので、情報をまとめたり、複数のメンバーでWEBサイトを作ったりするのに向いています。さらに記述言語がオーソドックスなので、だいたいどのOSからでも見ることができます。

Wikiをポートフォリオとして機能させるのも無理ではありませんが、デザイン面をあまり自由にいじれないという弱点もあります。このサイト（講義まとめWiki）はFreeStyle Wikiで作成しています。


 Blog（ブログ）

ブログは日記や最新情報、ニュースなどを掲載するのに向いています。
ですから、ポートフォリオなどにはあまり向いているとは言えませんが、ものすごくお手軽にWEBサイトが作れるのでHTMLがまったくわからないし勉強する気もないという人はとりあえずブログで作ってしまうという手もあります。
最近は、大手のプロバイダであれば、大抵はブログサービスを導入してますので、うまく使えば有効かもしれません


無料ブログサービス

プロバイダなどが提供しているもので、インストールなどの設定は必要なくすぐにブログサイトを構築できます。あらかじめデザインのテンプレートが用意されており、好きなものを選べるようになっているものが多いです。お手軽なのですが、逆に言うとテンプレート以外のものは作れないです。

有名なところは、このあたりでしょうか。

他にもたくさんのブログサービスがあります。こちらを参照してください。

Movable Type

自分でスクリプトをサーバーに設置して使うタイプです。ブログに限らず、これで構築すればサイト全体を一括管理することができるようになります。かなり自由にカスタマイズできますので、デザインを作りこみたい人はこちらがオススメです。商用利用などは有料ですが、個人利用であれば無料で使用できます。

Wordpress


Jimdo

  • 無料でホームページを作成できるサービス。かなり簡単に高機能なWEBサイトを作成できます。詳しくは、こちらの動画を見てみてください。
  • ためしにこのサービスを使ってWEBサイトを作ってみました。見てもらうとわかりますが、ページの下の方に画像閲覧用のサムネイルが並べてあります。クリックすると、大きく拡大表示されます。「Lightbox」と同じ機能ですが、標準でこの機能がついていました。お手軽にイメージギャラリーサイトを作るのにも便利です。

 WEB作成に便利なソフトウェア

業務では、Dreamweaverなどの市販されているソフトを使うのが一般的ですが、元々、HTMLやCSSはメモ帳などでタグを手書きしても作れるものです。市販されているものを使わなくても何も問題ありませんが、大きさ、色の指定、レイアウトなど見た目がわからないと効率が悪いので、Dreamweaverなどで作業しているわけです。

しかし、手書き派の人を援助するフリーソフトがいろいろ配布されています。Vectorなどのフリーウェア・シェアウェア配布サイトにいけばHTMLエディタなどの便利なソフトがいろいろあるので、使いやすいものを選んで使うといいと思います。もちろん、メモ帳などで書いてもいいのですが、タグをいちいち書くのは大変なので、実際に作成するときは、HTMLタグを半自動的に書き込んでくれるこれらのエディタは大変便利だと思います。HTMLの基本を学んだら積極的に使ってみてください。


 サーバー

インターネット上でホームページを作るには、どこかにサーバースペースを持たなければならないですが、サーバーを持つ方法は3種類考えられます。

  1. 有料のサーバーを使う（広告が入らないし、サービスも充実）
  2. 無料のサーバーを使う（広告が入る）
  3. 自分でサーバーをたてる（常時PCを起動し続ける必要があり、ネットワークやセキュリティについての知識も必要）

個人的に、一番オススメは有料サーバーです。広告が入るとやはり安っぽい感じがでますし、レイアウトにかなり制限がかかります。広告などが入ってもいいよ、というのであれば、無料サーバーでもいいかもしれません。自前のサーバーについてですが、この選択をする人であれば、僕があれこれ言う必要はないでしょう。

いくつか、サーバーを紹介しておきます。この他にもアクセスプロバイダ（so-netとかOCNとか）もインターネットアクセスのサービスの一つとして、サーバースペースを提供してるはずなので、自分が利用してるプロバイダのサービスを使ってもいいと思います。CGIが使えるかどうか、などサービス内容をよく見て選んでください。

  • Sakura Internet
    • 僕が借りてるレンタルサーバーの会社です。有料レンタル。
  • ロリポップ！
    • ここも有料レンタルです。
  • infoseek isweb
    • 有料と無料を選べます。
  • Google Page Creator
    • Googleの無料ホームページ作成サービス。
    • ブラウザ上で作業します。いくつかの雛形から選んで、そこにテキストや画像をはめ込んでいく手順になります。かなりお手軽にホームページの体裁を作ることができますが、単純にテキストと画像ファイルだけで構成されてるようなものしか作れません。Flashやムービーファイルを組み込むのはまだ無理そうです。凝ったものを作るというよりは、手間をかけずに急ぎでホームページを作らないといけない、というときにはサクっと作れて、独自のドメインも持てるので便利なサービスだと思います。ちょっと動作が不安定でよく落ちます…。
    • 試しに作ってみました
  • 自宅サーバーを構築しよう
    • 自宅サーバの作り方について解説してるサイトです。

 Googleサービス

直接ホームページ作成に関係するのは、BloggerとGoogle Page Creatorあたりだと思いますが、便利なサービスが多いので、Googleアカウントを取って有効利用すれば仕事効率も飛躍的に上がるでしょう。

  • Google
  • Blogger
    • 無料のブログサービス
  • Google Page Creator
    • 無料のホームページ作成サービス。非常に簡単にWEBサイトが作れます。
  • Gmail
    • 無料のオンラインメールサービス。
  • Googleドキュメント
    • オンラインのワープロ・表計算・プレゼン作成サービス。Excelの簡易版のようなものです。
  • Googleグループ
    • オンラインのグループウェア。メンバーだけが閲覧できるWEBページやメーリングリストなどが作れます。CGクラスで使っているMLがこれです。
  • Google SketchUp
    • 無料の３ＤＣＧモデリング用ソフト。直感的な操作でＣＧモデルを作成できる。

講義まとめWiki



2011年度講義

成安造形大学

前期

後期


講義ログ


更新履歴

2011/10/3

2011/5/9

2011/4/19

Copyright (C) 2002-2011 Ken Morita
Powered by FreeStyleWiki3.6.3 with Perl5.008009