[Web制作][Google]font directoryがスゲー

ちょっと前にGoogleがWebフォントを公開して話題になりましたが
これすげー便利

[http://code.google.com/webfonts/preview]
プレビュー見ながら、フォントのデザインが出来ちゃうって奴
スタイルまで自動で作ってくれちゃうのがうれしいですね

試しにGoogle fontを使用してみました。
[http://starvalley.lv9.org/20100603/]

いきなり方向性の確認

Webクリエイターボックスさんの
初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイターボックス」という記事を見て、
こういうのまじめに考えた事無いかもと思い
いきなりケツ見せ!
もとい!
いきなりやり直し(ぁ

ま、始めはこんなもんさw

ということで、上から順に進めて行きましょう。

まずはWebサイトを作る目的を考える!

  1. 目的
    このサイトはユーザーに何をもたらすのか
    私という人種を世に知らしめr・・・・
    最終的なゴールは?
    HTML5 + CSS3 + JQueryを使用したサイトの構築
    それを糧にAPIを使用して自分のblog等をまとめるという野望もあり
    なぜWebサイト(オンライン)でなければいけないか
    う、特にないな・・・
    自前でサーバ構築してってのが面倒いから?
  2. ターゲットユーザー
    年齢層
    20~30代
    性別
    特になし
    職業
    プログラマーかな?
    パソコンorモバイル
    初めはPCで、後からモバイル対応
  3. 機能
    ダイナミックかスタティックか
    ダイナミックを目指す!
    使用するCMS
    CMSってなんだ・・・?
    後でググる
    必要な機能(サイト内検索、ブログ、フォトギャラリー、ショッピングカート …etc)
    ブログ、フォトはAPIから引っ張ってくる予定
    そういう意味では、今回は柄のみ作成で中身はAPIでの取得

サイトマップと呼ばれる構成図を作成

SlickPlanで作成してみた

SiteMap

ワイヤーフレーム(Webサイトのレイアウト)を作成

こんな感じ

Photoshopなどでサイトのデザイン

これは大変だ・・・
あとでジックリやりたいからまた今度・・・

次回を待て!

のテンプレ

debesoさんの所で配布しているテンプレートを
自分用にカスタマイズ
http://debeso.com/blog/2009/12/dahhunda/はじめようhtml5【html5テンプレートファイル配布してま/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" media="screen" />
  <link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" media="screen" />
  <!--http://html5resetcss.googlecode.com/files/html5-reset-1.4.css-->
  <link rel="stylesheet" href="./css/html5-reset-1.4.css" media="screen" />
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
  <![endif]-->
  <!--[googleからjquery1系最新取得]-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>HTML5+CSS3+jQueryの勉強</title>
</head>
<body>
  <header><h1>HTML5+CSS3+jQueryの勉強</h1></header>
  <nav>
	<ul>
	  <li><a href=""></a></li>
	  <li><a href=""></a></li>
	  <li><a href=""></a></li>
	</ul>
  </nav>
  <section></section>
  <footer></footer>
</body>
</html>

とりあえず、これを使えばHTML5を作成出来るぜ!
ま、HTML5っぽいことは何もしていませんが。。。

あとは、こいつをこんな感じのレイアウトにしたい。
汚いですが。。。

メニューの動きなんかはJQueryに依存しまくって
メニュー、セクション部分の枠はCSS3で丸くしたら

良いんじゃない

のカスタマイズ

自宅では基本Firefoxなんですが、
正直プライベート色の強いプラグインばかり入ってて
若干重い・・・
あと、ゴチャゴチャ・・・


なので


自宅でHTML5の勉強するときはsafariを使用しようと思う
うちのsafariちゃんはピュアなので
色々教えてあげないと使いにくくて


とりあえずデベロッパ向けプラグインを検索!
と、この辺で調べてみた



無料で使えるSafariプラグインいろいろ
http://www.designwalker.com/2009/04/safari-plugin.html


Safari で使えるプラグイン - soundscape out
http://d.hatena.ne.jp/tanemori/20081029/SafariPlugins


safariプラグイン 〜Web製作のための〜 | バシャログ。
http://c-brains.jp/blog/wsg/09/05/26-095014.php


で、入れてみたのがこいつら


Xyle scope
http://culturedcode.com/xyle/
HTMLやCSSを階層表示して、編集まで出来る優れもの!
が、プラグインかと思ったらスタンドアローン
safariベースみたいだけど・・・
まぁ、使いやすそうなので良いか


SafariSource
http://www.tildesoft.com/Misc.html
safariでソース表示した時に色分けしてくれる奴
無いよりマシ、無くても困らない
とりあえず入れておく


Drosera
http://trac.webkit.org/wiki/Drosera
safarifirebug


Safari Tidy
http://zappatic.net/safaritidy/download.html
ステータスバーにバリデイト表示
地味だが何気に使える奴


そうそう、忘れていたがsafariってfirefoxと違って
プラグイン入れるのにSIMBLが必要な場合があるみたいです。
ぶっちゃけよく分かりませんが、入れればOK見たいな
SIMBL上でプラグインを動かすのかな?


やっぱMacは何やるのも新鮮だw

追記

色々調べた結果
SafariSource、Droseraともに
Safariのバージョンが異なるので使えなかった(><;
もっとちゃんと調べてから書けって話ですが・・・

てか、[HTML5]とは

HTML5(エイチティーエムエル・ファイブ)は、HTMLの5回目に当たる大幅な改定版である。表記はHTMLと5の間にスペースを含まない。XMLの文法で記述する場合、XHTML5と呼ばれる。。(wikipediaより抜粋)

五じゃなくてファイブなんですね、なんかカッコイイ!
戦隊物みたいな感じがしますが好きです。


大幅改定ってのが気になりますが、
HTML 4.01をStrictで書いている人間には馴染みやすいのかな?
hatena記法より簡単なら良いがw

HTML5プロプライエタリプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム(JavaFX, Flash, Silverlight等)を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。そのため過去にはHTML5が普及すればAdobe Flashなどのプラグインは不要になるという意見もあった。(wikipediaより抜粋)

これでジョブズ氏がなんだかんだ言ってたわけですね。
でもこれって、私的には餅は餅屋なわけで
Flashが淘汰することは無いと思うし、残っていて欲しい!
でも、Flash無しでことが収まるならそれでもいい。
正直ブラウザに依存するの怖いし〜。


で、その結果コレですから

HTML5各ブラウザ対応状況

http://www.findmebyip.com/litmus/#html5-web-applications


ということで


とりあえず、フォーム系は使わない予定なので
Chrome,Firefox,Safari辺りを使ってみるかな。

これでやっとスタートライン?

さーて、何から手をつけようかな・・・

タイトルロゴ作製

タイトルが只のテキストだと寂しいよね。
だから、イメージ画像でも作製しようかと・・・

というわけで、今回はWeb上で簡単に作れるタイトルジェネレーターを試したいと思います!
今回試すジェネレーターはこいつら!

Web2.0 - Logo CreatrWeb2.0 - Logo Creatr【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
ロゴを作成するオンラインサービスでは老舗?的なサイトです。
タイプやフォント、バッチなど選べるのが特徴。
特質するべき所は、日本語表記でもOKなとこ!コレは大きいです。

Web2.0 Logo Creator by Alex PWeb2.0 Logo Creator by Alex P【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
flickr風のロゴを作成できるサイト。
ミラー効果やバッチが選べます。


Logogenerador.com - Generador de Logos web 2.0 OnlineLogogenerador.com - Generador de Logos web 2.0 Online【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
非常に簡単でわかりやすいインターフェイスが好感的なサイトです。
作成したい文字を入力して、好きなガラを選んでボタンを押すだけ!


Cool Text: Logo and Graphics GeneratorCool Text: Logo and Graphics Generator【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
ロゴの作成の他にボタンの作製も可能なサイトです。
英語満載で私はプルプルしながら操作しています(ぁ


web 2.0 Logo Creator Online. Design and Create Free Logosweb 2.0 Logo Creator Online. Design and Create Free Logos【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
フォントのスタイルや色を設定出来るジェネレータです。
作製したものをメールで送ることもできるのが面白いところかな?


Halloween - Web2.0風ハロウィンロゴジェネレーター - Bambino LabsHalloween - Web2.0風ハロウィンロゴジェネレーター - Bambino Labs【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
日本製です。やっぱ日本語だと安心しますね〜
ハロウィン風に作れる、ちょっと変り種。
カボチャバッチが可愛い!

Logo Maker-Logo54.comLogo Maker-Logo54.com【e】
はてなユーザーの評価 livedoorユーザーの評価 Buzzurlにブックマーク
STAR WARS風やHarry Potter風を作れるサービス。
任天堂風でPlayStationなんかも作れる



使ってみて思ったこと、結構違うね〜

    • Web2.0 - Logo Creatr安定してて結構使いやすかった。
    • Web2.0 Logo Creatorもいいんだが、バッチ部分のミラー効果がちょっと雑かな。
    • Logogenerador.comは新めのサービスと言うこともあり◎ただ、αとか表示できないのは痛いな・・・(うちのタイトル出来ないジャン!)。
    • Cool Textは高機能な面もありレスポンスは遅め。こちらもαは文字化けたTT。
    • web 2.0 Logo Creator Online. Design and Create Free Logosは以外にも大健闘?α表示しました!レスポンスも悪くないし。しっかり自分好みに設定できれば優秀かも。
    • Web2.0風ハロウィンロゴジェネレーターはどうしてか日本語表記が作れない。なじぇ?私だけ?とりあえず英文字は出来るみたいだけど、αは×でした。カボチャバッチは捨てがたいな・・・。
    • Logo54.comは紹介したはいいが、自分好みのフォントがないw好きな人は試してね。

結局今のところ採用はWeb2.0 - Logo Creatrかな、他ので良いのが出来れば変更するかもしれない。
何かこれ以外にいいジェネレータ知っている方は教えてください><