Home > ウェブ制作 Archive
ウェブ制作 Archive
僕がHTMLをコーディングするとき、意識しているポイント。
- 2009年6月27日 18:02
僕がHTMLをコーディングするときに気をつけていること。
- いかに余分な部分をそぎ落とし、シンプルにするか
- いかに自分も他人を見て、わかりやすい構造にするか
- いかに複数の要素をまとめることが出来るのか
これを意識していれば、スキルは上がっていきます。
僕のスキルは全然ハイレベルじゃないし、
時間が無いときはそこまで徹底しませんが、
意識しているだけで全然成果物は違います。
このポイントは論理的に考えないと出来ないので、
論理的思考も間接的に磨かれていきます。

- Comments: 0
- TrackBacks: 0
WEBデザインに便利な世界地図
- 2009年6月10日 18:11
Colissで便利なベクターデータの世界地図が紹介されていました。
WEBデザインをする際、結構こういう地図のベクターデータ素材が便利です。
http://dezignus.com/vector-world-map/
世界地図よりも日本地図を使う割合が多いと思いますので、
日本地図も検索して調べてみました。これは便利です!世界中の地図がありますよー。
http://freemap.jp/

- Comments: 0
- TrackBacks: 0
「古代の黄金文字」っぽいのをPhotoshopで作ってみた。
- 2009年6月 9日 16:34
Photoshopで古代の黄金の文字を作る方法 / ウェブデザインライブラリー
http://www.webdesignlibrary.jp/2009/06/ancient-golden-text.php
これを見て、Photoshopで作ってみましたー。
ちょっと「c」の文字とか見えにくいので、あまり上手くできなかったかも。


- Comments: 0
- TrackBacks: 0
WEB制作における画像作成で超基礎的なコト。
- 2009年6月 9日 14:31
WEB制作の現場で、画像作成をする上で超基礎的なことです。
WEBデザインにかじりたての方、DTPデザイナーに送ります。
- 画像の解像度は72dpi
- 色はRGB形式
- ファイル容量は軽く
- 画像サイズの指定は、画像編集ソフトで行う。
詳しくは以下。

- Comments: 0
- TrackBacks: 0
HTMLタグの閉じ忘れ、配置に注意!
- 2009年6月 8日 14:06
さっき元同僚とスカイプでワカラナイと言うところをチェック・レクチャーしたので、
役に立つかなと思い、久しぶりのWEB制作記事。どちらかというとHTML初級者向です。
HTMLタグの閉じ忘れ、配置に注意!というタイトルのとおり、
HTMLタグの閉じ忘れや配置の間違いがあると、
ウェブサイトのレイアウトが崩れてしまったり、
表示がおかしくなっているなどの現象が起こります。
HTML(xHTML)というのは、タグのほとんどが対の関係になっています。
例えば、
<div>〜〜〜〜</div>
<a href="http://www.webbyrock.com">WebbyRock</a>
と言ったようにです。
以下、閉じ忘れと配置の間違いについて説明します。

- Comments: 0
- TrackBacks: 0
優れた購入プロセスをデザインするための12のTips
- 2009年5月29日 16:40
ECサイトでのコンバーション率(成約率)を改善するために
とても役に立つTipsが紹介されていました。
12 Tips For Designing an Excellent Checkout Process/SMASHING MAGAZINE
http://www.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/
以下、最低でもここらへんは必ずおさえた方が良いですね
- 購入プロセスでショップ会員登録をさせない
- 簡単に注文を修正できるようにする
- 前ページやトップページなどに戻るボタンを設置する
- 買い物プロセスのどこにいるかを表示する
- シンプルなインターフェース
- ユーザーが購入プロセスからはずれないようにする
- 商品が届くまでに何日かかるか明示
- 買い物終了後に何が起こるのかを明示
- 購入内容の確認メールを送る
Checkout pages galleryはユーザービリティ改善やデザインの参考になりますね。

- Comments: 0
- TrackBacks: 0
WEBデザイナー必見!Photoshopレイヤースタイル[DesignWalker]
- 2009年5月29日 00:38
WEBデザイナーは必見です!
Photoshopレイヤースタイルいろいろ | DesignWalker
http://www.designwalker.com/2009/05/photoshop-layerstyle.html
いつもチェックしているブログDesignWalkerで、
Photoshopのレイヤースタイルが紹介されていました。
僕も220 Amazing Free Photoshop Layer Stylesや
Ultimate Web 2.0 Layer Stylesあたりは使っています。
面倒なグラデーションボタンのデザインがポチッと一発で適用出来ます。
PhotoshopでWebデザインをする人はかなり便利で、重宝します。

- Comments: 0
- TrackBacks: 0
オススメのサイト:Webデザインポータルサイト S5-Style
- 2009年5月22日 14:25
昨日1日ブログから離れていましたー。
運動不足なのに、自転車で往復20キロを走り、足がガクガクブルブルでした(笑)
札幌は夏日だったので暑いけど、自転車で走るのは気持ちよかったですよ。
さて、今日のブログ1発目はオススメのサイトの紹介です。
Webデザインのリンク集 Webデザインポータルサイト S5-Style
http://bm.s5-style.com/
このサイトの特徴は、このサイトの管理人さんが良いと思った
デザインのウェブサイトを紹介しているだけです。
WEBデザインの参考になるウェブサイトを探すときに重宝しています。
デザイン要素以外にも、レイアウト、ウェブサイトの構造、導線、
キャッチコピーなども注意深く確認しています。
僕はこのサイトをチェックしているときに
気になるサイトはブックマーク(お気に入り)に入れてます。
そして、実際に制作するときに、参考にする感じです。

- Comments: 0
- TrackBacks: 0
目的と手段を間違えるということの例をざっくりと。
- 2009年5月11日 16:04
- ウェブマーケティング | ウェブ制作 | ビジネス/仕事
WEBにおいても目的と手段を混同してしまっている方がいると、
WEB制作・WEBマーケティングでよく感じます。
特に手段の表面上しか見ない、
浅はかな知識や知恵しか持たない人に多いように思う。
WEBサイトを制作し、公開すること
WEBサイトという手段を行使することであって、
WEBサイトを公開すること自体がビジネス上の目的でありません。
でも、公開して満足し、放置プレイのサイトは腐るほどあります。
本来の目的は「ECの売上げを上げる」「問い合わせや資料請求を増やす」
といったことをWEBサイトで実現し、お客様に付加価値を提供、
そしてその成果を踏まえスタッフと会社が共に成長することです(狭義ですが)。

- Comments: 2
- TrackBacks: 0
自分の趣味・趣向的な「効果」ありきはNG
- 2009年4月28日 00:45
ウェブ制作者・ウェブサイト発注側のどちらにも言えることだけど、
いざウェブサイトを制作するときに、趣味・趣向的な「効果」を真っ先に考えてはNG。
間違いなくヘンテコなウェブサイトになります。
「趣味・趣向」ありきのウェブサイトでありがちなのが、
- ウェブサイトを開くといきなり音楽が流れる。
- フラッシュがごちゃごちゃ動いている。
- 全く動きのないウェブカメラの映像を生中継。
- 文字をチカチカさせたり、左右に流れている。
ちょっと思いつくモノで、こんなところです。

- Comments: 0
- TrackBacks: 0
MovableTypeのエディタが使いにくいので、FCKeditorをインストール
- 2008年7月 2日 01:51
記事を書くときにはHTMLタグを使ったり、リッチテキストエディタとフォーマット無しを繰り返し文章を整形していたんですが、やっぱりとても面倒。このブログを構築している MovableTypeのリッチテキストのエディタがとても使いにくいので、FCKeditor2.6をインストールしてみました。
FCKeditor2.6
http://www.fckeditor.net/
やっぱりいろいろできることが多くて便利ですね。でも僕はインストールに手こずりました。日本語版の作者のサイト「世界中の1%の人々へ」や多くのサイトを見たのですが、その通りにやっているはずがその通りに出来なかった。
今日のMovable Type:AjaxなWYSIWYGエディタ、FCKeditor 2.6 日本語版、MT版公開!(世界中の1%の人々へ)
http://www.dakiny.com/archives/movable-type/ajaxwysiwygfckeditor_26_mt/
僕が引っかかったのは、ほんの一点だけでした。


- Comments: 0
- TrackBacks: 0
グラデーション画像(ボタン・アイコンなど)の作り方〈初心者向け〉
- 2008年4月12日 23:13
立体感のある画像の作り方を書きます。
こういうの。
![]()
ボタンやアイコンを作るときにも十分応用できるので、
形や色を変えて、いろいろ作成してみると良いです。
制作環境は
Apple Mac OS X(10.4.11)
Adobe Illustrator CS
dobe Photoshop CS
とちょっと古め。
内容は超初心者向けに、
ちょっと細かい書き方をします。
わかりにくければ、コメントください!

- Comments: 0
- TrackBacks: 0
PHPで自動化、Webデザイナー向きなテク
- 2008年4月 3日 23:29
自分がラクをするための自動化のススメ--WebデザイナのためのPHP入門(builder by ZDNet Japan)
こりゃ確かに便利です!
- コピーライト表記を自動化する
- ヘッダーファイルなどを一元管理する
- コピーライト表記を自動化する
- 分散する情報を一元管理する
- ブラウザごとのCSSファイルを記述する

- Comments: 0
- TrackBacks: 0
Home > ウェブ制作 Archive
