ウェブ制作 Archive

僕がHTMLをコーディングするときに気をつけていること。

• いかに余分な部分をそぎ落とし、シンプルにするか
• いかに自分も他人を見て、わかりやすい構造にするか
• いかに複数の要素をまとめることが出来るのか

これを意識していれば、スキルは上がっていきます。

僕のスキルは全然ハイレベルじゃないし、
時間が無いときはそこまで徹底しませんが、
意識しているだけで全然成果物は違います。

このポイントは論理的に考えないと出来ないので、
論理的思考も間接的に磨かれていきます。

》続きを読む

Colissで便利なベクターデータの世界地図が紹介されていました。

WEBデザインをする際、結構こういう地図のベクターデータ素材が便利です。
http://dezignus.com/vector-world-map/

世界地図よりも日本地図を使う割合が多いと思いますので、
日本地図も検索して調べてみました。これは便利です！世界中の地図がありますよー。
http://freemap.jp/

Photoshopで古代の黄金の文字を作る方法 / ウェブデザインライブラリー
http://www.webdesignlibrary.jp/2009/06/ancient-golden-text.php

これを見て、Photoshopで作ってみましたー。
ちょっと「c」の文字とか見えにくいので、あまり上手くできなかったかも。

WEB制作の現場で、画像作成をする上で超基礎的なことです。
WEBデザインにかじりたての方、DTPデザイナーに送ります。

• 画像の解像度は72dpi
• 色はRGB形式
• ファイル容量は軽く
• 画像サイズの指定は、画像編集ソフトで行う。

詳しくは以下。

》続きを読む

さっき元同僚とスカイプでワカラナイと言うところをチェック・レクチャーしたので、
役に立つかなと思い、久しぶりのWEB制作記事。どちらかというとHTML初級者向です。

HTMLタグの閉じ忘れ、配置に注意！というタイトルのとおり、
HTMLタグの閉じ忘れや配置の間違いがあると、
ウェブサイトのレイアウトが崩れてしまったり、
表示がおかしくなっているなどの現象が起こります。

HTML（xHTML）というのは、タグのほとんどが対の関係になっています。

例えば、

<div>〜〜〜〜</div>

<a href="http://www.webbyrock.com">WebbyRock</a>

と言ったようにです。

以下、閉じ忘れと配置の間違いについて説明します。

》続きを読む

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はユーザービリティ改善やデザインの参考になりますね。

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デザインをする人はかなり便利で、重宝します。

昨日１日ブログから離れていましたー。
運動不足なのに、自転車で往復20キロを走り、足がガクガクブルブルでした（笑）
札幌は夏日だったので暑いけど、自転車で走るのは気持ちよかったですよ。

さて、今日のブログ１発目はオススメのサイトの紹介です。

Webデザインのリンク集 Webデザインポータルサイト S5-Style
http://bm.s5-style.com/

このサイトの特徴は、このサイトの管理人さんが良いと思った
デザインのウェブサイトを紹介しているだけです。

WEBデザインの参考になるウェブサイトを探すときに重宝しています。

デザイン要素以外にも、レイアウト、ウェブサイトの構造、導線、
キャッチコピーなども注意深く確認しています。

僕はこのサイトをチェックしているときに
気になるサイトはブックマーク（お気に入り）に入れてます。
そして、実際に制作するときに、参考にする感じです。

》続きを読む

WEBにおいても目的と手段を混同してしまっている方がいると、
WEB制作・WEBマーケティングでよく感じます。

特に手段の表面上しか見ない、
浅はかな知識や知恵しか持たない人に多いように思う。
 

WEBサイトを制作し、公開すること

WEBサイトという手段を行使することであって、
WEBサイトを公開すること自体がビジネス上の目的でありません。

でも、公開して満足し、放置プレイのサイトは腐るほどあります。

本来の目的は「ECの売上げを上げる」「問い合わせや資料請求を増やす」
といったことをWEBサイトで実現し、お客様に付加価値を提供、
そしてその成果を踏まえスタッフと会社が共に成長することです（狭義ですが）。

》続きを読む

ウェブ制作者・ウェブサイト発注側のどちらにも言えることだけど、
いざウェブサイトを制作するときに、趣味・趣向的な「効果」を真っ先に考えてはNG。

間違いなくヘンテコなウェブサイトになります。

「趣味・趣向」ありきのウェブサイトでありがちなのが、

• ウェブサイトを開くといきなり音楽が流れる。
• フラッシュがごちゃごちゃ動いている。
• 全く動きのないウェブカメラの映像を生中継。
• 文字をチカチカさせたり、左右に流れている。

ちょっと思いつくモノで、こんなところです。

》続きを読む

記事を書くときには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/

僕が引っかかったのは、ほんの一点だけでした。

》続きを読む

ネット上で学べるPHPの講座です。
PHPの講座のなかでは、書籍類もあわせて見比べると、
かなりわかりやすい部類じゃないでしょうか？

まだ講座も3回目ですが、今後も期待できそうです。

》続きを読む

立体感のある画像の作り方を書きます。

こういうの。

ボタンやアイコンを作るときにも十分応用できるので、
形や色を変えて、いろいろ作成してみると良いです。

制作環境は
Apple Mac OS X（10.4.11）
Adobe Illustrator CS
dobe Photoshop CS
とちょっと古め。

内容は超初心者向けに、
ちょっと細かい書き方をします。

わかりにくければ、コメントください！

》続きを読む

自分がラクをするための自動化のススメ--WebデザイナのためのPHP入門（builder by ZDNet Japan）

こりゃ確かに便利です！

• コピーライト表記を自動化する


• ヘッダーファイルなどを一元管理する


• コピーライト表記を自動化する


• 分散する情報を一元管理する


• ブラウザごとのCSSファイルを記述する

》続きを読む