--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2010年12月10日

設計からSEOまでWeb作成に役立つオンラインサービス

Web製作のときあったら便利!というオンラインツール(又は記事、チェック表)を作成手順の通り集めてみました。

■サイト作成の目的を明確にする
Webクリエイターボックス
http://www.webcreatorbox.com/tech/website-before-start-ready/

■サイトマップを作成する
Webクリエイターボックス
http://www.webcreatorbox.com/tech/website-sitemap-tool/

■ワイヤーフレームを作成する
Cacco
http://cacoo.com/
Web上で図の作成&リアルタイムコラボレーション
Cacooはリアルタイムなコラボレーションをサポート。1つの図を複数人が同時に編集することができます。編集の反映はリアルタイムに行われ、まるで「同じ部屋で策業をしてるような」感覚でコラボレーションすることができます。
IEだとなぜかCSSが切れてます…

■Webデザインをする
Photoshopは無いけどちょっとした写真編集がしたいひとは
NAVERフォトエディター
http://photoeditor.naver.jp/

ちょっとしたデザインを作ってくれるジェネレーター
Ajaxload
http://www.ajaxload.info/
読み込み中に出てくるアイコンをさくっと作成してくれるジェネレーター

継ぎ目の無いパターン用無料素材|Photoshop Vip
http://photoshopvip.net/archives/19304

○デザインに悩んだら
国産のWebデザインギャラリーサイトが一番参考になるのでまとめてみた|かちびと.net
http://kachibito.net/web-design/japanese-design-gallery.html

WebSiteColorPicker
http://pick.v-colors.com/
好きなサイトの配色を参考にしてみたり。

見出しデザイン.com
http://midashi-design.com/
見出しって結構重要。

おまけ
COMMIT LAB
女子のための情報サイトデザイン21+4
http://commitlab.com/20100906/female_design2101.html
かわいらしいだけでなく見ていて楽しいサイトもちらほら

■html
HTML整形ツール
http://u670.com/pikamap/html_seikei.php
もしもHTMLコードがぐちゃぐちゃになってしまったらきれいに整えよう。

スキルアップ+α
無駄なdiv要素やclassだらけのマークアップから卒業する方法|コリス
http://coliss.com/articles/build-websites/operation/work/div-itis-and-class-itis-with-the-960-grid-system.html

■css
CSSをコーディングする前に確認しておきたいこと
CSS Happy Life
http://css-happylife.com/archives/2010/0719_2220.php

CSS Selector Generator
http://css.bashalog.biz/
CSS Selector Generator は HTML のコードから CSS ファイルのフォーマットを自動で出力
※HTML5非対応です

もしもコードがぐちゃぐちゃになってしまったら

ProCSSor CSSをすっきりきれいに整形してくれる | 百式
http://www.100shiki.com/archives/2010/09/procssor.html

Clean CSS
http://www.cleancss.com/
無駄をなくして最適化してくれるジェネレーター
一応使用前にバックアップ保存を取ってしましょう

スキルアップ+α

覚えてよかったCSSテクニック|zaru blog
http://zaru.tofu-kun.org/2010/04/22/%E8%A6%9A%E3%81%88%E3%81%A6%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9Fcss%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/

少しのコードで実装可能な20のCSS小技集|Webクリエイターボックス
http://www.webcreatorbox.com/tech/css-tips20/

レイアウト作りを簡単にしてくれるcssグリッドシステム|Webデザインレシピ
http://webdesignrecipes.com/css-grid-system-layout/

CSSセレクタの高速化の話し|Webtech☆Walker
http://webtech-walker.com/archive/2010/05/18162034.html

■簡単にHPに動きを付けたい
yuga.js | Kyousuke.jp
http://www.kyosuke.jp/yugajs/
追加するだけでさまざまな動きを実装してくれるjQuery

■テスト
ブラウザの大きさによってどう見えるかをチェック
TestSize
http://testsize.com/

BROWER SHOTS
http://browsershots.org/
ほぼすべてのブラウザを網羅、ブラウザでの表示を
画像で確認できるサイト。

My DebugBar|IETester
http://www.my-debugbar.com/wiki/IETester/HomePage厄介なIE5.5~9までのプレビューをしてくれるソフト

■セキュリティを上げる
.htaccess Editor
http://www.htaccesseditor.com/
オンライン上で簡単に.htaccesseditorファイルを作成してくれます

■アクセス解析
google analyics
http://www.google.com/intl/ja/analytics/

Google Analyticsの使い方・活用法 | NAVER
http://matome.naver.jp/odai/2129110026283833201
スポンサーサイト

Comment

非公開コメント

Trackback

http://perruche15.blog134.fc2.com/tb.php/38-f82f3864

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。