ホームページ制作・デザイン会社インスパイアデザイン　スタッフブログ

コンテンツの見直し・ターゲットの絞込みにつき、ホームページ制作サービス（http://inspire-design.net/）のページを大幅に削除いたしました。

以前の記事（情報量が多くなったらメニューとコンテンツを整理しよう！）にも記載しましたが、数ヶ月に一度は自社のホームページの見直しを行いましょう。

これらは経営にも関わることだと私は思います。

どれくらいのペースでコンテンツの見直しを行えばいいのか？

私どもの考えでは、日々更新する内容とは別に、1年を四分割し 3ヵ月に1度 のペースに、ホームページの見直しを行うことがベストだと思います。

どれくらい期間でリニューアルを行えばいいの？

ホームページを大幅にリニューアルする期間としては、3年に1度リニューアルすることをおすすめいたします。

インターネットの事情も変化していく、ユーザーを飽きさせないなどリニューアルさせる目的を明確にし、時代に取り残されないホームページ作りが必要ですね。

イラスト制作サービス【サブジェクトデザイン】にプロフィールと制作の流れを追加しました。

キララちゃんとミラクルくんの特徴も明らかに！？

プロフィール

制作の流れ

ウェブサイトの横幅はpx（ピクセル）という単位で表すのですが、どれくらいの幅が丁度良いのか？

これらは掲載するコンテンツの量、現代のパソコンの解像度などを考慮し、ウェブデザイナーやウェブディレクターが決定します。

今の弊社のウェブサイトの横幅が800px

http://inspire-design.net/

正直、今はコンテンツが増えてきたので2カラムから3カラムにし

横幅も800pxから950～1000pxくらいにしたいのですがね・・

それは置いておいて、同じ800pxでも横メニューのみとなると

表現の幅が広がります！

参考 弊社運営サイト：VIVA！CMS

http://vivacms.net/

上記にも述べましたが、これらは掲載するコンテンツの量、パソコンの解像度などを考慮すると

とりあえず800pxなら無難。

ですが、今のパソコンは解像度が広いので950pxとかでも問題はない。

ただ情報が少ないのに、950pxにしてしまうと、カラッカラな微妙なホームページになり兼ねないです。

悩むところですが、弊社でお客様のホームページを作成させていただく際は

ヒアリング後、どの程度のコンテンツを掲載するかによって最適な横幅を決めさせていただいております。

先日リリースしたビジネスブログ大作戦ですが、まぁとりあえず走らせている段階で、操作マニュアルや資料などは今リアルに着手中。

MTOSのちょっと複雑で分かりづらい管理画面もカスタマイズし、よりシンプルに分かりやすくユーザビリティに配慮しております。

いやいや作成しているスタッフに感謝感謝ですね。

ちなみにもっともっとユーザビリティを向上させ、シンプルで使いやすい管理画面にするため、今なおミーティングを重ね作成中です。

それに加え、裏方作業の操作マニュアルや資料・パンフレットなども作成しております。

とにかくひとつのサービス（プロジェクト）を進めるには、明確な計画を立て、それらを細分化させ、一つ一つクリアさせていくという地道な仕事がたくさんあります。

こういった地道で地味な作業も、ひとつの勉強となり、知識となり、ノウハウとなるので、楽しみながらやっていきたいと思います！

■URL：http://www.youtube.com/watch?v=dgKjs8ZjQNg

※ちなみに動画は全て英語です。

Adobe Photoshop CS5の新機能 【Patchmatch】

アドビのフォトショップCS5に搭載される新機能「Patchmatch」が話題を呼んでいるみたいです。

今まで手動で細かくやっていた作業も自動的に補正してくれる！これにより大幅に作業時間を削ることができそうですね。。

この「Patchmatch」の機能を使えば、素人の方でも違和感のないコラージュ画像を簡単に作れそうです。凄いなーアドビのフォトショップCS5・・

ちなみに弊社ではCS3のまま。CS4にはアップグレードしてませんね。そんな劇的な機能も追加された感がなかったので。今回のCS5は考えちゃいますね。

「あぁ・・パワポや、パワポ・・」

と言いたくなるくらい、パワーポイントをあまり使いこなせておりません。

パワーポイントで会社のオリジナルのテンプレートを作成しようとしてるのですが

調べていたら結構簡単にできたのでご説明いたしますね。

注）
テンプレートといってもデザインテンプレートというよりは、ヘッダー・フッターのデザイン
会社のロゴを入れたりとかそんな程度ですが。

スライドマスタというのを使います。

やりかたはいたって簡単。

メニュー「表示」→「マスタ」→「スライドマスタ」で、スライドマスタを表示します。

このスライドマスタにて、ロゴを入れたり、見出しの大きさやフォントを設定しテンプレート（雛形）を作っておくわけです。

その後テンプレートとして保存する

作成したテンプレート（雛形）を保存します。

メニュー「ファイル」→「名前を付けて保存」を選択。
↓
「ファイルの種類」ボックスから「デザインテンプレート」を選び「保存」ボタンを押します。

内容に関しては・・フォトショップです 汗

プレゼンの資料作成などは、イラストを配置し、デザインなどさほどこだわらないのですが、今作成中の資料はいずれお客様にご説明する際の雛形なので、多少デザインにこだわりたくなってしまうもんですねやっぱり。

そこで結局フォトショップにて内容は作成しています。（イラストレーターが得意な方はイラストレーターかと思いますが）

「それじゃテンプレートの意味ないんじゃない」と聞こえてきそうですが、そうでもありません。ヘッダー・フッター・ロゴ入り・見出しの設定ができるだけでも、かなり良い感じです！

予めサイズを決めておき作成。見出しなどはパワーポイントでレスポンス良く追加・変更ができますし、なによりページ毎に追加・作成・管理ができるのが魅力ですね～

ユーザー参加型サイトとは、小さいところで掲示板、大きなところで有名なのがmixiなど、ユーザーがコンテンツを作り（コメント投稿・日記・コミュニティなどなど）サイト自体を盛り上げていくシステムです。

もう多くのIT企業では、利益を考えているか否かどうであれ、ほぼなんらかの形で実践しています。

これらはネット上でユーザー同士がコミュニケーションを取れるなどの他、管理者が広告費目当てでユーザー参加型サイトの構築をする場合が多いでしょう。

企業だけでなく個人（アフィリエイター）などでも運営していることも多く、メリットは自分でホームページやブログを更新しなくても、ユーザーたちが盛り上げてくれれば、管理だけで済む。などのメリットが挙げられるでしょう。

これらをリアルな世界に置き換えて考えると、広告費＝不動産収入など、不労所得的な考えに繋がります。僕はアフィリエイトはやっておりませんが、副業として、また本業としてアフィリエイトで利益を求めている方は地味な努力をコツコツやり続け、その売り上げた利益でユーザー参加型サイトの運営を始めたりするんです。

弊社ではそのようなアフィリエイター（個人）の方でも、システム開発を受注いたしております。また地域を盛り上げようと、ポータルサイトの構築をお考えの方などにも、ユーザーがなにかしらアクションできるようなユーザー参加型のシステムを取り入れていくことで、地元の方だけではなく、観光客の方なども参加したり考え方次第で夢は膨らみますね。

photoshop(CS3)での点線の書き方が微妙に分からないことが以前にあったので忘れないようブログにて紹介です。

※photoshopのバージョンはCS3です。

1）、
photoshopを開き、まずは新規作成。分かりやすいように背景は白にしました。
サイズは640×480にしました。

2）、
画面左のツールボックスから、ブラシツールを選択してください。

3）、
ブラシパレットを開きます
表示されない場合は、［ウィンドウ］メニューから［ブラシ］を選択してください。

4）、
上記ブラシパレットでのブラシのサイズは 1px です。
ブラシパレットの左上あたりにある[ブラシ先端のシェイプ]をクリック
間隔を 200％ に設定します。

5）、
こんな感じであとは書くだけです。
WEBデザイナーの方、CSSだけだとこの1pxの点線が表現できないんですよね…。（IE6で！）
結局、画像にしないと駄目。保存しておけばいいのに都度作っちゃう僕です。

Illustratorなら点線も簡単に書けるのですが、photoshopだとちょっと分かりづらいんですよね…。
他にもIllustratorならすぐできるのに、photoshopだと微妙にどうしようか？というのが多々あったりします。

WEBデザインをする方はphotoshopでデザインを起こすことが多いので、ちょっとしたコツを覚えていけば、
クオリティも上がり、作業効率もアップすること間違いなしです！

6月に群馬オフィスを移転し、せっせと環境作りに勤しんでいました！ようやくある程度できてきました☆

▼ワークスペースは白で清潔に！

▼打ち合わせスペースは落ち着いた感じに

▼お気に入りの照明です♪

▼青空オフィスですｗ
　いつも良いアイディアが浮かぶのはパソコンの前ではなく、山の中です。

環境が仕事に及ぼす効果は絶大ですからね！
素人ながらに、これからもモチベーションアップオフィス作りを目指して頑張ります！（本業も頑張ります！）

WEBアプリケーション（WEBシステム）開発について、弊社ではどんなことができるのか？只今、コンテンツ、ページ作成中なので簡単ながら掲載させていただきます。

WEBシステムに関してはどのようなことができるのか？を説明することがちょっと困難な場合がございます。と言いますのも、技術者×お客様の場合、技術者がちょっと専門的な観点からバァッーとしゃべりすぎてしまい、聞いているお客様が嫌になってしまうケースなどが考えられます。

とはいえWEBシステムに全く無知な営業さんが打ち合わせにいっても、話がまとまるはずもありませんし、できないことをできます！なんてことも十分有り得ます。

一言で言ってしまった機能が、2週間かかるシステムだとしたら・・
これは技術的にはできても、「できないことをできます！」って言ってしまうことと変わりません。

こういった観点から、技術を持ちつつ、更にコミュニケーション能力もある。そんな人材が業界的には不足しているのが現状でしょう。

話は反れましたが、ではインスパイアデザインでは何ができるのか？

たいがいのことはできますので、インターネット上のサービスや参考サイト、競合サイトを教えてください。根底から調べ上げ仕組みを理解し、作成に取り掛からせていただきます。

たとえば複数の異なる提供元の技術やコンテンツを複合させて新しいサービスを形作るマッシュアップサービス！このようなことも可能です。

たとえばYouTubeの動画を利用した、動画サイト！

どういうこと？とお思いになる方も多いと思いますが、自社のサーバーに動画を置けば、サーバーに関するコストも多大にかかります。

だったらYouTubeの動画を利用して、自社サイトで動画を見せているようにすればいい。簡単に言えばそんな感じです。

ブログなどのYouTubeなどの動画共有サイトの動画を貼り付けられるのは、スタンダードとなっておりますが、更にその貼り付ける動画をランダムに拾い上げて、自動で見せる。なんていうことも可能なのです。

ランダムに拾い上げるデータを、別のサイトから取得し、その取得したデータを基に自動で動画を拾ってくれる。

そうすればサーバーに付加がかからないだけでなく、更新の手間を省いてくれて、自動化してくれる。これほど効率のよいことはないでしょうね。

また普通にショッピングカートの構築も可能ですし、検索システム、会員登録システム、顧客管理システム、独自CMSなども構築も可能です。

ショッピングカートで言わせていただけば、貴社独自の販売用のショッピングカートなども構築可能です。弊社で作ったショッピングカートを貴社のブランドとして販売していただいたり、またレンタルしてもらうなどということも可能です。

今回の記事は参考例のひとつに過ぎません。WEB上にあるもの、また新しいサービスとして弊社でも色々な企画・アイデアを練り、おもしろいサイト作成に注力を注いでおります。

クオリティの高いホームページをお客様にご提供するには、腕の良いWebデザイナーが必要です。弊社の制作スタッフ（僕も含む）の日々日常を書いてみました。というか職業病的な。。笑

ついついしてしまうこと！無意識にしてしまうこと！

本屋にて‥

本屋に行くことは普通のことであり、やはり仕事に関する書籍を何時間も立ち読みしてネタや情報を常に探している。まぁここまではいいんですが、無意識にパソコン関係のコーナーへ足を運んでしまう！仕事で病んでいるときでも‥。なんてこともあったりします。

本屋にて‥（パターン2）

ビジネスの書籍などをパラパラと見て週に2・3冊は思わず買ってしまうのですが、書籍となると「文章構造」「字間」や「行間」、使われている「書体」とかを見てしまう。。 せっかくよい事が書いてあるのに、見づらい、読みづらい本というのがあったりでもったいないなぁとか思ってしまう。基本的にホームページも考えや構造は書籍と一緒！見出しがあってタイトルがあって目次があって本文、段落とかめっちゃめちゃ気にしますからね～☆ こういった観点からも書籍の売り上げが変わってくるんではないかなぁ。。と客観的に考えてしまう。

電車やクルマなどで‥

電車の中で広告を眺めながら、「これすごいデザインでいいなぁ」とか「うわぁこんなんでも依頼する会社あるんだぁ」とか無意識のうちに評価してしまっている。 クルマを運転中に看板のデザインやインパクトとかを見てしまったり、キャッチコピーで「グッ」とくるものをメモったりしてしまう。

こんな感じで日々ネタ探しをしてしまうんです。これによって自分たちのデザインの引き出しが増えるのは良いことなんですが、気づかないうちにストレスになってしまっていることもあったりと、完全にもう職業病ですねー。苦笑

Webデザイン会社インスパイアデザインでは、WebデザインのみならずWebシステムの開発も行っております。

それに合わせてWebシステムに関するページを増設いたしました！
http://inspire-design.net/system/index.html

後々サブメニューも増やし、より分かりやすいWebサイトにしてまいりますので、今後ともよろしくお願いいたします。

弊社のWEBデザイナー兼イラストレーターの高橋が、キャラクターを書いてくれましたー☆

可愛いのでブログに掲載しちゃいます♪

以下のイラストは僕のイラストみたいですｗ

結構似てるかもｗ

こんな感じでキャラクターなどのデザインも手がけておりますよ！

気になる方は、ホームページのお問い合わせフォームよりお問い合わせください。

イラストのタッチについては、幅広く対応しており、商業用からグラフィック、キャラクターモノ、どのようなイラストも作成可能です☆

秋になると、色とりどりに木々が紅葉し、黄色や赤、茶などで山が色付き派手な印象に変化する。

でも寒くなってきて、人肌恋しい時期でもあり、寂しい季節でもある。

そんな秋がなんだか好きなようで嫌いなような。。感じです。

来週は約一週間程、関西に出張です。

京都へ行くので、紅葉が綺麗そうだなぁ～☆

ってことで本日バックを購入してきました！

大荷物でもないので、そこそこ物が入るバックを購入。

正直バックとか普段持たない人間なので、どこのブランドいいとかさっぱり。

記憶の中にあのデパートにそーいえば、バックコーナーがあったな。。ってことで、そこまで行って適当に買ってきました！

なかなか機能的で、超ー気に入ってしまった♪ポーターのバック♪

先日、CS3を導入したのですが、僕的に一番の注目はFLASHです。

FLASHを利用したアニメーション（テンポや動かし方など）は心得ているつもりなので、制作の際、なんの問題もなく制作できるのですが、いかんせんアクションスクリプトが苦手で。。

まぁスタッフの中にアクションスクリプトにてFLASHコンテンツを作れる者がいるものの、「やっぱり自分でも覚えたい！」っていうのがありまして！

いままでWEBサイト制作に関して、様々な事を勉強し覚えてきたのですが、過去2回程アクションスクリプトでつまづいております。FLASHの参考書だけボロボロに！それでも覚えられないのだからよっぽど向いてないんでしょうね　汗

しかーし！3度目の正直！
ここでガッツリ覚える気であります！！！

CS3になり、フォトショップからのレイヤーの保持など、いままで面倒だった作業も効率化できると思うので、時間を見ながら覚えていくつもりでございます！

皆様はWEB標準という言葉をご存知でしょうか？

WEB制作に携わる人間であれば、もちろんご存知かと思いますが、
一般の方でWEB標準をご存知の方は、ほとんどいらっしゃいません。

ちょっと難しい言葉ですが、
WEBの世界での標準規格（正式なルール）みたいなものです。

一般的な物で例えるなら、コンセント。
このいつもお使いのコンセントの形状が異なっていたら、困りますよね？

それと同じくWEBの世界にも標準化が求められているのです。

では、どのような事を指すかといいますと

ブラウザごとの表示の「ずれ」
一般の方はインターネットエクスプローラーをお使いの方がほとんどですが、
実はその他にもホームページを閲覧する「ブラウザ」をいうものには種類がございます。
代表的なもので、FireFox、Safari、Netscape、Operaなどがございます。これら全てのブラウザで、お持ちのホームページが同じように閲覧できなければ困ります。

これらを全て意識し、WEBサイトを制作しなければなりません。
ただ全ての業者が、WEB標準を意識し作成しているとは限りませんので、注意が必要です。

お客様には見えない部分、分からない部分をしっかりとWEB標準に準拠しているか否かで、
その業者がしっかりと作成してくれているかが分かってしまうのです。

これらを実際の社会に例えるなら、
一般住宅が当てはまるのではないでしょうか。

全くWEB標準を無視して作られているホームページは、
言わば欠陥住宅です。

ホームページでも、必ず欠陥が生じるのです。

こうならない為にも、WEB標準に準拠した堅実なWEBサイトを作ってくれるホームページ制作会社に依頼することが大切です。

ホームページを制作するということは、デジタルな作業です。
ただやはり私は、アナログな作業も必ず行います。

といいますのも、企画・構成・サイトマップ作成などは、
ペンとノートを持ち、分からないことは電子辞書で調べながら作業を行います。

常に画面に向かっての作業では、なかなか思いつかない事も多いのです。

以下に実際どのような作業か例ををあげてみます。

■企画・立案の段階
↓
煮詰まったら、ワードなどにデジタル化

■構成・サイトマップ作成
↓
ページ数が多い場合など、リンクが複雑になります。
また拡張性も考え、フォルダの構成も大変重要です。
サイトマップをイラストレーターやエクセルでデジタル化し、お客様へ提示します。

■デザイン・レイアウト
↓
トップページのレイアウトなどは、一度紙にラフを書きます。

このように、ほとんどがデジタルな作業ではないかと思ってらっしゃる方も多いと思いますが、実際はそうでもありません。

特にパソコンに不慣れな方など、アナログな考えの方が多いはずです。

経営や方針、戦略などを紙媒体にまとめたり。
要はそれらをまとめ、ホームページに記載し、見ていただくエンドユーザーに伝えることが出来れば良いのです。

デジタルな世界ということで、懸念される方も多いと思いますが、私どもの仕事もアナログなくして出来る仕事ではないのです。

ホームページを制作するにあたり、まずは横幅を決定いたします。
Webにおける横幅の単位はｐｘ（ピクセル）で表されます。

この横幅を決める基準ですが、明確には「ありません」。
ほとんどデザイナー次第ですが、僕の中ではかなりのこだわりがございます。

一般的なサイズというのは760px～780px。
このサイズ内であればほとんどのパソコンで問題なく表示される横幅です。

大企業などは未だこの760pxあたりが多いのではないでしょうか。
ただ最近のパソコンのディスプレイのサイズは、昔に比べより大きくなってきているので今では760ｐｘより大きく作ることもございます。

僕のこだわりと言うのは、どのようなホームページを制作するかによって変わってきます。
と、言いますのも760ｐｘと800ｐｘ、900pxでは全然表現の幅が違ってくるからです。

存在感と言う点でも800px～は「どーん」と言う感じですかねｗ

まず情報量のさほど多くないホームページや、より多くの方が見ると思われるホームページは、
760、780pxで制作。

情報が多く、存在感を出したいサイトは800pxあたりで制作します。

900ｐｘとかではあまり制作しませんが、よりアピールが必要、より多くの情報を掲載する
などと言った場合は900pxとかで制作します。

mixiなんかは900pxくらいありますね。

横幅に加え、「縦メニュー」「横メニュー」でまた情報の掲載の仕方が変わるのです。

横幅760pxで制作したホームページも
「縦メニュー」「横メニュー」では全然違ってきます。

コンテンツ（内容）が多く縦だけでも横だけでもメニューが足りないなどの場合は
「縦メニュー」「横メニュー」を使ったレイアウト、俗に言う「逆L字型」のレイアウトで制作します。

これは当サイト、インスパイアデザインのサイトがこの「逆L字型」のレイアウトです。

このように横幅とレイアウトにより
そのホームページ自体のイメージが大きく変わり、掲載する情報の整理も変わってきます。

それら全てを最初のデザイン時に考え、最高のWebサイトをお客様にご提供するのです。

また見せ方と言う部分でも、ホームページ全体をセンターに寄せる、または左に寄せる
などで、そのホームページのデザイン、雰囲気にあった制作をするのです。

ただいま、インスパイアデザインのホームページはリニューアル中です。
より見やすく情報を整理したWebサイトへと生まれ変わりますので宜しくお願いいたします。

ちなみに横幅＆レイアウトは
800ｐｘの逆L字型で制作しております☆

日々色々なサイトを見回り、ネタを仕入れております。
やはりデザイン重視のオールフラッシュのサイトはカッコイイですし、魅力的です。

ただやはりユーザビリティ・アクセシビリティの観点からも使いがってはよろしくありません。
まず第一に重いです。。ブロードバンドが普及した世の中ですがそれでも正直「イラッ」と来ることがあります。

これではエンドユーザーは逃げてしまいますよね。
よっぽどのネームバリューがない限りオールフラッシュのサイトはあまり必要がないですね。

デザイナーとしてはオールフラッシュでバリバリ作りたいんですが。。。

なので主に中小・零細企業様のサイトではフルCSSでホームページを制作させていただいております。

目的はやはり収益に繋げたいというご要望がほとんどです。
軽めでSEOにも大変効果的な(x)htmlとcssによるコーディングが今の主流です。

Webで大変重要なのはデザイン面での「外見」よりも
上記の様な(x)htmlとcssによる「しっかりとした」コーディングでの「中身」です。

これらはWeb標準というものに準拠した作りにします。
当社では一切の手を抜かずにコーディング作業をさせていただいております。

ホームページの制作においてコーディング作業とは見えない部分ではあります。
ホームページの制作をお考えのお客様、またお持ちのお客様、この部分まで気にされている方はほとんどいないと思います。

が、ここが一番重要なのです。

家を立てると例えるなら、最近話題の「欠陥住宅」状態になりかねません。
正直このコーディング作業、やはりしっかりと制作している業者でないと分かりずらい部分ではあります。

ご要望とあれば、当社でお客様のホームページを診断させて頂くことも可能ですので、お気軽にご相談下さい。

またこれら(x)html、css、コーディング、Web標準、などといった事に詳しく知りたい方もお問い合わせ下さい。正確にホームページを制作することによりどのような効果が出るのか、またどんなメリットがあるのか、お伝えできればと思います。

Web制作において切っても切り離せない問題がレイアウトの問題です。
特に古いブラウザをお使いの方は、現在の(x)html＋cssでWebサイトをコーディングした際にレイアウトが崩れることがございます。

当社ではエンドユーザーの事を考えて制作はwindowsで行っております。
というのもほとんどのユーザーがwindowsをお使いだからです。

ここで最近マック用のブラウザ「safari」がwindowsでも使用できるとの事で、
現在アップルのサイトではSafari 3 パブリックベータ版のダウンロードが可能です。
http://www.apple.com/jp/safari/download/

これで制作時にパソコン一台で全てのブラウザでのレイアウト崩れの確認が出来るので非常に便利です。

では現在どのようなブラウザがあるのか少しご説明いたします。
よく使われているのがIE（インターネットエクスプローラー）です。

これもWeb制作者にとってはくせもので、特にIE5などバージョンの古いものでは現在のコーディング（作り）ではレイアウトが崩れてしまいます。

問題を解決するにはただ単にIEのバージョンをあげればよいので下記に公式サイトのURLを記載いたします。
IE,safariの他にFirefox、Sleipnir、Netscape、Operaなどがあります。

ちなみに僕はFirefoxを愛用しています。様々なプラグインを利用し制作時にもとても便利な昨日がたくさんあるからです！

■IE
http://www.microsoft.com/japan/
windows/products/winfamily/ie/default.mspx

■Firefox
http://www.mozilla-japan.org/products/firefox/

■Opera
http://jp.opera.com/download/index.dml?custom=yes

■Sleipnir
http://www.fenrir.co.jp/sleipnir/downloads/

■Netscape
http://wp.netscape.com/ja/downloads/index.html

■safari
http://www.apple.com/jp/safari/download/

他にもございますが有名どころを集めてみましたので、ご自身にあったブラウザをお使いになられてみてはどうでしょうか？