新サイト(はてなブログ)

使えるリンク集 – web作成編

前回の使えるリンク集 – 探し物編も好評だったので、気合入れて作成してみました。今回はweb作成編です。
web作成、といってもweblogの驚異的な普及で個人サイトのあり方が激変してきています。
いわゆる、「ホームページ」を作成する為に不可欠だった、「macromedia dreamweaver」「homepage builder」「adove golive」などのwebオーサリングツールは個人サイトを作成する上で必須のツールではなくなって来ています。
どのソフトもweblogをデザインする為に必要なCSSのデザインに完全には対応していないからです。
ということは、お金を出してオーサリングツールを購入してもweblogのデザインをするだけならば全く使用しないという事もありえます。というか、僕はこのサイトを構築するに当たって、以前まで使っていたdreamweaverを全く使っていません(泣
テキストエディタとの格闘の毎日です。
というわけで、今回のお題は「web作成」。サイト立ち上げまでは一昔前とは違った道のりを辿る方も多いと思います。
もちろんFLASHメインのサイト、weblogの便利さに頼らないサイトはまだ沢山あります。
そういう方もひっくるめて、これからwebサイトを立ち上げようという方にとっても便利なサイト達を紹介します。


【レンタルサーバ編】

まずはWEBスペースをレンタルしなくてはいけませんね。色々なサービスで値段もピンキリです。独断でチョイスしました。無料の所と安い所を。
■infoseek isweb
無料で、50MB、CGI・SSI・PHP・Ruby・Python可。上部に広告有り。倉庫にも使え(以下略
■ロリポップ
月250円で200MB。転送量無制限。驚異の価格。低価格レンサバでは一人勝ちなのでは?CGI・SSI・PHP・Ruby・Python・MYSQLまで利用可。movabletypeを日本一安く設置できるサーバ。

【web作成環境編】

web作成前に揃えておきたい環境がありますね。まずは、オーサリングツールの紹介
■macromedia studioMX2004 (win& mac)
これの前のバージョン使ってます。fireworksというグラフィックツールのhtml書き出しが強力です。studioMXはflashのオーサリングツールも同梱です。お金あるならコレ。
■IBM homepage builder(win)
日本で一番売れているwebオーサリングツール。ダサいサイトが一発で作れる事で有名ですね。使った事ないので分かりませんが。
■Adobe Golive CS(win & mac)
アドビのwebオーサリングツール。adobe慣れしてる方にはインターフェースが分かり易いらしいです。photoshop→imageready→goliveという流れでしょうか?これも使った事ないので・・・
フリーのHTMLエディタはあまり使った事ないので、リンク集を紹介しておきます。
■フリーのHTMLエディタを比較してみる。
次、テキストエディタですね。これは必須です。メモ帳は使ってはいけません。
■TeraPad(win)
フリーのシンプルなテキストエディタ。HTML/Perl/Ruby/INI/BAT/C++/Java/HSP/Delphiの各種編集モード等、必要な機能はほとんど搭載されています。unicodeにも対応してます。
■mi (mac)
文字コードはShiftJIS, JIS, EUCをサポート(MacOSにText Encoding Converterがある場合は、UTF-8, ISO-8859-1, KOI8-Rなどもサポート)
シンプルで使いやすいです。
次はローカルで作成したページをサーバにアップロードする為のソフト、FTP転送ソフトが必要ですね。
■FFFTP(win)
フリー最強のFTP転送ソフト。windowsならコレしかないでしょう。
■RBrowser (mac)
最初はとっつきにくいが慣れると快適な、macでも数少ないフリーのFTP転送ソフト。
他にもあるかもしれませんが、とりあえず、これだけで始められます。

【web学習編】

さて、準備は出来ましたが、htmlとは何か、もわからないアナタは「できる」シリーズを求めて本屋に行くのではないでしょうか?買ってはいけません。
数ページしか読まないことウケアイです。
インターネットのことはインターネットで。とりあえずぐぐれ、と怒られますね。というわけで、web作成の為の学習が出来るサイトを。サイトを立ち上げた後も何度もお世話になっているところをピックアップしました。他にも色々ありますが、それはぐぐっとけ、ということで。
■はじめてのWebドキュメントづくり
webの仕組みから丁寧に書いてあります。ただ、僕は手打ちでhtmlを最初から勉強するのは難しいと思うのでここは概念だけでいいと思います。
■みんなのタグ辞書/HTMLタグ辞書
初心者が最初に引っかかるHTMLのタグを非常に分かり易く、簡単に解説しています。カテゴリ分けが非常に便利です。
■とほほのWWW入門
老舗のWEB作成支援サイト。逆引きリファレンスが便利。質問掲示板に有益な情報あり。javascriptやperl、SSIのリファレンスもあります。
■HTML/CSS クイックリファレンス
HTMLのタグやCSSの記述に悩まされたら迷わずココ。
アルファベット別、目的別に検索できます。便利!色見本も良く使います。
■30分間(X)HTML入門(web KANZAKI)
ある程度ページが出来上がった頃に読むと良いです。美しいhtmlとは何ぞや?みたいな事が丁寧に書かれています。

【インタラクティブなページの作成】

ある程度自分でwebページを作ることが出来たら、次のステップに進むのが「掲示板」「アクセスカウンタ」の設置でしょう。
cgiやphp等を駆使してそれらを設置するわけですが、プログラムの知識などは全く必要ありません。web上の豊富なサンプルでなんとかしましょう。
これらのプログラムには大きく分けて「掲示板丸ごとレンタル」「自分のサーバに設置」とに分かれます。
まずは、レンタル系。ほぼ無知識で利用できます。しかし、広告は出るし、出来ることは限られてるし、ちょっとガッカリですが。
■[CGIBOY]無料CGIレンタル
無料のアクセスカウンタ、掲示板、日記、アクセス解析など。とりあえず、簡単に無料で始めたいヒト向き。
■teacup.
無料掲示板、チャット等。ものの数分で自分だけの掲示板が作成できます。ここだけで活動していらっしゃる方もいるようですね。
■FC2BBS
無料レンタル掲示板 アクセス解析等。ここの利用者もかなり多いです。teacup同様数分で作成できます。
■スゴいカウンター ~ アクセス解析付 カウンター無料レンタル
アクセス解析付無料アクセスカウンターです。これの利用者も多いですね。
ぱっと思いつくだけでこんなところです。星の数ほどこの手のサービスはありますので、無料リンク集でも眺めてみてはいかがでしょうか?
次は設置系です。上記レンタルサーバだと問題なくcgiやphpが使えるのでこれらも利用可能です。是非自分だけのBBSを設置することをオススメします。
■Perl Script Language TryTheHomePage
perl(cgi)解説サイト。設置方法やパーミッションの設定等、初心者向けの情報も満載です。プログラムは覚えなくてもいいので、設置方法だけでも読んでおくと、サンプルの作者に「厨房が」と思われなくて済みますね。
■2apes.com
スキン型掲示板の老舗。ユーザが作成した豊富なスキンをDLするだけで掲示板のデザインを変えられる。日記タイプに改造することも、自作することもhtmlが分かるならワリと簡単。movabletypeを使うまで掲示板にも日記にも、ずっと重宝してました。
■futomi’s CGI Cafe
超高機能アクセス解析やその他使えるCGIプログラムがダウンロード出来る。ウチのアクセス解析はここのを使ってます。最強
■CGI RESCUE – ネットサーフレスキューWeb裏技
cgiの基礎解説から、豊富なcgiスクリプト(掲示板や日記とか)のサンプルダウンロードまでcgiに関することなら殆どの情報が手に入ります。サンプルの数では群を抜いてます。
■レッツPHP!
PHPを自サイトに活用したいならココ。ウチのメールフォームやphotologはこちらのを利用させてもらってます。凄い便利。
■9TST4.
ランキング作成・アクセス解析機能付きカウンタ・高機能掲示板等のスクリプト配布サイト。デザインセンスがとてもよいです。

【素材・フォント系】

PCで絵が書けない人、上手く写真が撮れない人はweb上のモノをガンガン利用しましょう。フォントも上手く使えばリッパなデザインになります。
というわけで、素材集。これも挙げだしたらきりがないので、厳選。
■Free Images
2500を超える高画質フリー写真がDLできます。ジャンル分けされており便利。
■FreeFoto.com
50000オーバー(!)のフリーの写真素材サイト。すげえ。
■OpenPhoto.Net
20000オーバーのフリー写真。センスが良い写真がカテゴリ別に。オススメ。
写真素材はコレくらいで充分です。次、フォント。
■マニアッカーズデザイン
フリーフォント系サイトの大御所。ここのフォント使ってるヒト多いですよね。カワイイ系フォント満載。
■Pentacom.jp
使えるフリーフォントから超便利フリーソフト、使えるフォトショッププラグインまでの素晴しいサイト。VTRfilterとかtoyFilterとか良い感じです。
■pizzadude.dk!
カワイイ系のフォントサイト。有名フォント多数。
■Font Junkie
作者さんのセンスで集めたフォントリンク集。デザインを見ながら探せるのがいいね。検索も良いです。
■DaFONT
DINGBAT(絵文字)系フォント多数。ジャンルで選べる大量のフォント集。ここだけでホトンドのフォントがDLできるかも。

【MOVABLETYPE系】

当サイトはmovabletypeというweblogツールを使って構築しております。weblogの利点として、過去ログの整理のし易さ、更新のし易さが挙げられます。そしてなんといってもgoogleに引っかかり易い(現在のところは)という利点があります。movabletypeならば他のツールに比べて自由度がかなり高いのでweblogっぽくないデザインでやりたい方にもオススメです。
その内設置マニュアルを作ろうと思っているのでお楽しみに。
今回はweb作成の中でのMTということで、リンク先は必要最小限に抑えました。
■Movable Type 日本語化手順
日本語環境のMTを語るには外せない存在のみらのさん作のMT日本語化の手順及びMTインストール解説。
丁寧すぎて涙が出ますね。
■HINAGATAテンプレートダウンロードページ(iNTERNET magazine)
2XUPのかみのごうや氏作成のMT用テンプレート、「HINAGATA」。2カラム、3カラム、写真用があります。シンプルでとても良いです。ここから自分流にアレンジしてみてはどうでしょうか?
■すちゃらかCSS素材集: Movable Type用 テンプレートサンプル
あまりMT用のサンプルページっていうのも見かけないが、すちゃらかさんは豊富にあります。
これを使って自分流にアレンジしてみるのもよいかもです。
■Movable Typeカスタマイズ集(ブロッグ崩し)
MTはやはりカスタマイズしてこそ楽しいと思います。ブロッグ崩しさんとこは随分前から「読みやすいweblog」を目指していらっしゃいます。大切な事ですよね。
そのブロッグ崩しさんのカスタマイズリンク集を紹介。大体網羅されています。
MT系のネタはまた別の機会に特集します。必ずや。

【CSS系】

やはり、CSS(カスケーディング・スタイルシート)はweb作成の次のステップには必要不可欠ですね。文字の大きさ、レイアウト等を一元管理できるので覚えたほうが絶対楽なのです。そして鬱陶しいテーブルレイアウトとも早くおさらばしたいものです。
weblog系のサイトは一部を除いてテーブルを使用してません。fireworks、imageready等で書き出したレイアウトはテーブルにしかならないので仕方ないのですが、文章の部分等はcssを使いたいものですね。僕もまだ理解するには程遠いです(泣
■スタイルシートの基本(The Web Kanzaki)
激しくわかりやすくスタイルシートについて解説してあります。
■正誤情報:スタイルシートWebデザイン
解説書はもういらないかも。
【その他】
他にもオススメサイトは沢山あります。
■ColorMatch 5K
スライドバーをマウスでスライドさせるだけでその色に合った5種類の色を表示してくれます。
色合いに迷ったときはココ。
■DHS Front Page
ダイナミックDNSサービス。自宅サーバでwebをやる人は必須ですね。
■FLASH パワーリファレンス
FLASHを始めようと思ったらまずココ。解説書も顔負けの図付解説アリです。サンプルも豊富。
■Internet Archive
既になくなってしまったサイトを見ることができる驚愕のサイト。月別にアーカイブされています。凄い。ウチのオープン直後の状態もバッチリ晒されています(泣
■ミケネコの htaccess リファレンス
あなたの知らない.htaccessの利用法が満載。
■やってはいけない!! ホームページの掟
一度は読んでおくと良いサイト作成時の注意点が満載です。
■サーチエンジン一発登録・一発太郎
膨大なサーチエンジンに一発で登録してくれます。あまり意味がないように思いがちですが、googleが他のサーチエンジンの結果を拾ってくれるので登録しておいたほうがよいと思われ。
■The W3C MarkUp Validation Service
HTMLをチェックできる。
■W3C CSS 検証サービス
CSSをチェックできる
=========================
というわけで一気に書きました。どうでしょうか?僕はwebデザイナーではないのでその筋の方から嘲笑されそうですが、その辺はご勘弁。
あのサイトが足りてねえよ(怒
とかはコメントで教えてください。こっそりメールでもいいですよ(笑
どなたかこれを読んでくれた方が参考になれば幸いです。

【当サイト関連】

■使えるリンク集 – 探し物編

リンク集

Posted by ayu