本『個別指導シュタム』のWEBサイトは、全てフリーのツールで作成しました。
記事の最後で紹介しているホスティングサービスの『さくらのレンタルサーバ ライト』以外は全て無料で使うことができます。
目次
・HTML ジェネレート
・WEBデザイン全般
・デザイン / CSS
・アニメーション / Jscripts
・画像 / 写真編集
・ホスティング & SNS
HTML ジェネレート
ezhtml
http://www.w-frontier.com/software/ezhtml.html
フリーの html ジェネレートツールです。
Microsoft Word 感覚で htmlにタグ振りすることができます。
厳密にはリンクウェアとのことで、提供元の URL リンクを作成したWEBページに貼り付ける必要があります。
本サイトでは、TABLEタグ等、入力が煩わしい箇所で部分的に使用しました。
はじめて HTML を触る人には良いかも知れません。
sakura エディタ
http://sakura-editor.sourceforge.net/download.html
日本語代表する多機能無料のテキストエディタで htmlタグに特化したものではありませんが、使いこなすと協力な html 作成ツールとなります。
私は html のみならず、様々な作業で使用しています。
WEBデザイン全般
コリス
http://coliss.com/
本サイトのデザインのメインフレームである グリッドデザインは、コリスさんで知りました。
ベテランWEBクリエイターでは常識かも知れませんが、とても情報量の多い参考になるサイトです。
Webデザインレシピ
http://webdesignrecipes.com/
とてもデザインが素敵な WEBデザインに関するBLOGサイトです。わかりやすく丁寧に説明があり、とても素晴らしいサイトです。
Stocker.jp / diary | Webデザイン、Web制作の最新情報を分かりやすく解説するブログ
http://stocker.jp/diary/
こちらもベテランWEBクリエイターでは常識かも知れませんが、丁寧な解説で、とても参考になるサイトです。
本サイトはデザイン全般を考える際に、多くの点を参考とさせて頂きました。
デザイン / CSS
可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog
http://blog.xlune.com/2009/09/jqueryvgrid.html
こちらは コリスさんでの紹介記事より確認した jQuery(後述) のプラグインです。
本WEBサイトのメインフレームとなっているグリッドデザインの コア部分です。
このプラグインにより、本WEBページ内の各コンテンツが BOX として表示されていて、また、サイズを変更した場合にもなめらかにページが調整されます。
CSS 前提知識
http://w3g.jp/css/guide/
日本語のWEBサイトで一番わかりやすく CSS を解説しているのではないでしょうか。
こちらの情報が元となり、各BOX を大きくしたり小さくしたり出来るようになりました。
CSS3 Playground by Mike Plate
http://css3.mikeplate.com/
CSSジェネレーターです。
残念ながら 前述の EZHTML では すべての CSS をジェネレートできない為、こちらで CSS の細かい設定を行いました。
操作性の良い、素晴らしいWEBアプリです。
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
http://coliss.com/articles/build-websites/operation/design/922.html
本サイトにおける グリッドデザインの詰めの作業において、参考とさせて頂きました。
アニメーション / Jscripts
jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/
上述の GRIDプラグイン を動作させるための基本的な javacriptライブラリです。
多機能であり、現時点では最高のjavacriptライブラリではないでしょうか。
Gridデザインの実現はもちろん、各BOXを最大化<=>最小化する際の細かいアニメーションは、このライブラリで実現しています。
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
http://coliss.com/articles/build-websites/operation/javascript/296.html
こちらも再度、コリスさんです。
各BOXをクリックして大きくする際に、画面を先頭になめらかに移動する為のプラグインです。
画像 写真編集
Paint.NET - Free Software for Digital Photo Editing
http://www.getpaint.net/index.html
フリーの画像編集ツールです。
後述のとおり、透明グラデーション機能を備えた数少ないフリーツールの一つです。
写真に透明グラデーションを適用する
http://www.dougamanual.com/blog/211/1231/e5771.html
フリーツールで、透明グラデーションを使用出来るものは非常に少ないのですが、Paint.NET であれば、それができます。
上記のWEBページでは、その詳細な手順が説明されています。
フラットなフリーの日本向けソーシャルアイコンセットを作りました。 - バニデザノート
http://vanidesign.blog.fc2.com/blog-entry-7.html
ソーシャルアイコンセットです。
国外ものでは mixi のアイコンが含まれていないため、今回はこちらを使用しました。
壁紙コレクション | 多様なサイズを取り揃えたデスクトップ用壁紙
http://wallpaper.v-colors.com/
告知欄のバナー(大きく細長い画像)の背景用の画像のいくつかをこちらから、いただきました。
綺麗な画像が多く、フリーなのでオススメです。
PHOTO STOCKER 高解像度フリー写真素材を無料配布。商用可能。ホームページにも。
http://photo.v-colors.com/
こちらも同じく、告知欄のバナーの背景用の画像をいくつかいただきました。
綺麗な画像が多く、フリーなのでオススメです。
ホスティング & SNS
Google AJAX Feed API入門
http://www.ajaxtower.jp/googleajaxfeed/
本サイトの告知欄のバナーは、本BLOG の記事が更新されるようになっています。
これは、本ブログの RSSフィードより、情報を取得して、サイトに組み込んでいるからです。
ただしWEBブラウザのセキュリティ機能により、本サイトと本BLOGを連結させることができません。
そこで使用したのが Google AJAX Feed API です。
別のサイトに組み込む場合(あまり無いと思いますが)このような方法を用います。
Facebook ページ（旧ファンページ）のはじめかた STEP01
https://www.facebook.com/note.php?note_id=153013314750115
言わずと知れた facebook です。
個別指導シュタム も facebook ページを設けておりますので、もしよろしければ『いいね!』をお願いします。
facebook ページ に『いいね!』していただくことで、 Facebook 経由で配信している 本BLOG の更新情報がご確認いただけます。
Google Japan Blog: 「Google+ ページ」で、新しいつながりを
http://googlejapan.blogspot.com/2011/11/google.html
こちらは Google+ です。
個別指導シュタム は Google+ページ も開設しています。
Google+ページ、機能は未知数ですが、今後の機能拡張が期待されます。
さくらのレンタルサーバ ライト｜さくらインターネット
http://www.sakura.ne.jp/rentalserver/lite/
最後になりましたが、ホスティングサービスの さくら です。
低価格で WEBサイトを開設することができます。
