第1回 『Web製作の仕事について』
ホームページを作るには、基本となるhtmlをおぼえなくてはいけません。
ですが、現在のWebはhtmlだけでは、思ったことができません。では・・・自分でホームページを作りたい人は何から何までを勉強すれば良いのでしょう・・・これからWebを勉強しようと思われている方は迷うところではないでしょうか?ですが、そのWebの内容によって、おぼえなくてはいけない知識は大きく変わってきますので一言では言えません。
ですので・・・まずWebにはどんな担当分野があるかなどを説明しますね。
Web関連の仕事には大きくわけるとWebプランナー、Webデザイナー、プログラマ、コーダー、ディレクション管理者、SEなどがいます。
●Webプランナー
Webサイト制作のプランを立てて編集をします。
●Webデザイナー
表示されるWebのレイアウトやデザインなど製作します。
●プログラマ
動的サイトを作る場合に、内部の動きなどを製作します。
●コーダー
プランナーやデザイナーからとの連携でhtmlなどの言語を整えていきます。
●Webディレクター
制作工程の管理などが主な仕事です。
●SE
プログラマとかさなる部分もありますが、どちらかというと畑で言えば土壌処理が
メインとなります。
●ライター
文章を書く人。
●フォトグラファー
デザイン重視やECサイトでの写真撮影から加工をする人。
こんな感じで担当がわかれるわけですが、大手企業だと、こういった項目はきっちりわかれているんだろうけど・・小さい製作会社は、担当する業務が複数かさなっている部分も多々あります。
これは会社の規模でも共通していると思いますが、例えばプログラマといっても動的なものはすべて担当するかと言えばそうではありません。。プログラムには、サーバー側プログラム(PHP、JAVAなど)とブラウザー側プログラム(ajax、flashなど)があるので、前記がプログラマ、後記がコーダーやデザイナーの仕事となる比重になるケースが多いです。ですが、どちらも重なる部分があるので、仕事の進捗具合など決める場合もあります。
ちなみにこの中で私の担当は・・・・
●Webプランナー
●Webデザイナー
●コーダー
●Webディレクター
●ライター
●フォトグラファー
です。ですので日々の学習はかかせません。ですが、学習を勉強とは思わないので苦痛には感じませんので、だいたい年間1000時間以上は、この学習時間にあてます。何をするにも学習と実務(実務)を重ね合わせていくことでより実戦で応用できるようになるわけですね。
第2回 『バナー製作 綺麗なレイアウト方法』
第2回 『バナー製作 綺麗なレイアウト方法』
さて、前回は下記のバナーのNGポイントを三つほどお書きしました。
「色の使い方、色の配色、文字の使い方」こんなところをポイントにあげた中で、色の使い方の説明をしました。に
色については、今から3年も近く前にもなりますが・・・僕がずっと書いている楽天ブログの方でVol.1-Vol.3で書いていますので興味ある人はお読み下さい。↓
http://plaza.rakuten.co.jp/Jetcafe/diary/200512100000/
こんなに古い記事を探してきて、改めて自分で読んでみても、色への基本的なことは、今も変わっていませんので1番に知識としていれておくポイントかと思います。
さて今回はバナーのレイアウトです。今回は私が先日、海外へ行って撮影した写真を例に説明をしますね。
バナーと写真には、いったいどういう関係があるのでしょうか?僕的な考え方ですが、写真を何となくでも上手く撮れる人は、基本的なデザインセンスをすでに持っている人だと言えます。
それはデザインをする上で色と同じように大事なのが構図の作り方です。これは写真、建築パース、WEBデザインでも共通かと思います。私はもともとデザイナー職が本業ではなく建築デザイン(建築設計)が本職だったのでデザインをする上でも最初の考えるのは構図です。
上の写真を分解すると下記のように1~3(赤部分)に三つの消点(集中点)があります。これを3消点と呼びます。消点は平面なものへ立体感を見せるときに使うものです。例えば、写真でも人物をど真ん中から真正面からとった場合には平面に見えますね。これには消点がないので単調な図となるのです。
つまりバナーで表現するレイアウトでも、この構図を考えることは重要なのです。
NGバナーとして1番上に表示したものも消点はないので単調に見えるのです。
では、前回からのNGポイントをおさらいして「大森商店」(架空店)のバナーを作り直してみましょう。
・色(明度が高い色をばかりを使わない)
・文字(崩し文字だけで固めない、またコピーとなる文章は●●が●●とわかるように)
・構図(何かの基点をつくり、単調なバナーにしない)
こんなところを気をつけると右記のような無難なバナーとなります。
第1回 『バナー製作 綺麗なレイアウト方法』
第1回 『バナー製作 綺麗なレイアウト方法』
Webレイアウト教本の章では、第1回としてバナー製作のレイアウト方法をお書きしたいと思います。
バナーとは、ウェブサイトを紹介する役割をもつ画像のことを指します。
もともとバナーは、旗に似せた横長の広告のことをバナー広告と呼びましたが・・・。
現在のバナーの種類
■バッジ広告 (正方形に近い長方形)
■レクタングル広告 (TV画面のような形)
■スカイクレーパー広告 (縦長の形)
■フローティング広告 (Webページを浮遊するような広告)
■リッチメディア広告 (FLASH広告)
■ポップアップ広告 (小さい別ウインドウで開く広告)
他にもたくさんのバナーと呼ばれる広告があります。
弊社サイトでは、正方形の120px(h)120px(w)のバナー広告と240px(h)120px(w)のバナー広告の出稿が可能です。ですが、たまに広告の出稿をお断りするケースがあります。それは拝見するかぎりバナーの製作レベルがなく広告として下品になるものは出稿をお断りするか、弊社のほうで無料で製作をして出稿させていただいています。この理由は、広告は縦に並ぶので、あまり下品なものを他の広告と並べるのは、他の出稿された方にご迷惑がかかるという部分からの配慮です。
では、どうしてバナーのレイアウトがおかしくなってしまうのか?
今回から、下記のバナーなどを例に無難なバナーの作り方をご説明します。
(とは言っても、当方もまだまだ、たいしたレベルではないので無難という言葉を強調しておきます!)
当方は、素人が作るバナーとプロが作るバナーはひとめでわかります。
この理由を下記に書きますので、このポイントを改善していくと必ずバナーのデザイン力が上達すると思います。
■駄目なバナー
さて、皆さんは上記のバナーの駄目な点がわかりましたでしょうか?
上記のバナーには、駄目なポイントを三つほどいれてみました。次に良いバナーをご紹介します。
■良いバナー
上がWebデザイン製作会社さんのバナーで、下がレストラン評価誌のザガットです。どちらも出稿していただいたバナーです。上は、デザイン製作者さん作成しただけあって可愛いバナーに仕上がっていると思います。下は当方が製作したものですが無難なZAGAT色を継承できています。
ここで、駄目なバナーと下の良いバナーの違いは何か気がつかれたでしょうか?
では、そろそろ駄目なバナーのポイントを書きますね。
1.文字が全て崩し文字になっている
2.文字のまわりの色をメインの色が同系色なので意味がない。
3.明度の高い色を多様しすぎ。
こんな感じです。
【1の解説】
崩し文字とはぐにゃぐにゃさせた文字です。それに加えてフォントまで崩しています。これでは逆に汚くなるだけなのです。素人の人で失敗するケースがやりすぎ、頑張りすぎなのです。
【2の解説】
文字のまわりの色とは、大森商店のまわりについているピンク色です。これを飾り文字と呼びますが、メインの色が赤で、まわりを縁取るのがピンクの場合、これは同系色となり、逆に文字をぼやけることになります。文字をソフトにするためにわざと同系色を使う場合もありますが、赤系の飾り文字にピンクをあわせるのはあまりおすすめしません。なぜかは最後にご説明します。
【3の解説】
全てを明度の高い赤を使っているので派手な印象があります。ザカットも赤を多く使っていますが、これは深みある赤の面積比が多いことで下品な印象ではなく高級感をだせています。
第1回目のバナー製作のレイアウト方法は色の使い方です。色は私たちの生活の中でも密着してもので色相心理というものがあります。つまり色を見て私たちは何となく連想できるものがあるのです。
青なら海、空、静か、冷静・・・
赤なら炎、血、情熱、燃えるといった具合に何かを連想できるのです。
色のことは色彩計画といってかなり深い話しになっていきますのでこの辺にしておきますが、同系色で固める
場合は、人が嫌がらない色を使うほうが無難です。ファッションでも同じですよね。全身ショッキングピンクの人が歩いていたらちょっとひいてしまいますよね?そういった意味で最初に紹介したバナーは青を多様しているのです。自分たちの服装と置き換えてみるといいかも知れません。では、次回の第2回目はバナーのレイアウト構図についてご説明しますね!
★ブログをたくさんの人に読んでもらおう!女性ブログ応援サイト ファイブスタイル↓もうすぐ新コンテンツ開始し
第12回 『写真 タイ旅行の写真』
先日タイの方へ旅行に行ってきました。現在、タイのフォトギャラリーを作成中ですが撮影した何枚かの写真をご紹介しますね。 今回は普通の旅写真です。
タイの王宮 夜にライトアップされます。
メロン、イチゴなどの屋台が必ずあります。衛星的に問題かと思いきやハエとかは全然たかっていないのです。
メロンは日本のメロンに比べて甘みが弱くて少し歯ごたえがあります。個人的には好きです。
像がミルクをチューブを使って飲んでいる写真です。とてもかわいいです。
かわいい小象がいました。この小象がお店の中にも普通にはいってくるのには唖然でした。
他にも犬やリスがたくさんいましたが、全く人間を恐がりません。タイでは動物と人間が共存できていると実感しました。
★ブログをたくさんの人に読んでもらおう!女性ブログ応援サイト ファイブスタイル↓もうすぐ新コンテンツ開始し
第11回 『写真加工 写真を映画チックに』
第11回目「写真加工 写真を映画チックに」
■写真を映画チックに
普通の人物撮影をサスペンス映画(コミック?)風にしてみました。実際の写真は1280(横)ありまして人物も良い表情なので、写真のすべてを掲載したかったのですが、人物より許可がおりませんでしたΣ( ̄ロ ̄lll)ので下部分のみを掲載します。
★加工ポイント
レイヤーを3枚使い、それぞれにソフトフォーカスをかけ深みをだします。次にサスペンスなので調整レイヤーで全体を青系の色へ変更しています。他は照明をスポット照明にかえているのと追い詰められた雰囲気をだすために肌色を悪くしているのがポイントなのですが表情は見せることができませんのでご想像してください・・(〃´o`)=3 フゥ
■弊社運営のファイブスタイルでは、11/1-11/31の期間・・これまでの広告掲載料金をオール半額(50%OFF)のスペシャルキャンペーンを実施中です!1日110円で20ページ以上に掲載されるバナー広告の出稿ができます。なんと・・・PV単価0.005円!
是非、女性向け広告を出稿ご検討の方はご利用ください。
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル↓
第2回「SEOは大切なのだろうか?」続編
このカテゴリ『PC&Webニュース』では、Web製作者と運営者側の立場からいろいろな目線で、できるだけ読んでいただく方が得するためになる話を書いていこうと思います。
第2回「SEOは大切なのだろうか?」
さて前回のお話では『SEO対策に過度の期待をできません!』という記事を書きました。
ですが全否定しているわけではなく、過度の期待はしないほうがいいですということですね。このSEOにたいして費用をかける目的を考えることが重要なんです。そして、それが対費用効果に見合うものなのか?・・・ここで気をひきしめ冷静な目を持たなければいけません。
最近、株式投資の本を2.3冊読んでみました。全冊、意図的にいろいろな個性がありそうな著者の方に変えてみました。(デイトレ系の本は含みません)読んでいるとすべて文章力がある方なので、本の内容にひきこまれます。この本の中には、近々投資額の4倍は必ず稼げるなんて発言する方もいらっしゃいます。へぇ~1000万円投資しておけば4000万円のバックがあるわけかぁ。これはぁ!すごい!なんてつい思ってしまうほどです。
しかし、100万部以上売れた本でその1/4の25万人が同じ方向を向いて同じ銘柄で同じ買い方をすれば株価はあがります。1人が50万円分の株を購入したとすれば1250億円のお金が動くわけで、4倍つくことはここでなくなるわけです。これは極論ですが、言いたいことは・・冷静な目を持つということです。『神輿にのると痛い目にあう』という定説は、ライブドアショックでも明確だったわけです。
株式投資と同じようにSEO対策も同じかと思います。正確な情報を吸収していって自分の目線で判断できるようになる。ですので、できる限り、このブログでは正確な情報を提供していくつもりです。
話しを戻しますとWebでは、自分のサイト、ブログの価値を知るためには『Googleのページランク』というものがあります。ページランクは0-10段階でサイトをランク付けしたもので、サイトの位置づけを知るためにはかなり精度の高いものです。検索エンジンの上位表示へも直接関連しているものでもあります。
この中でページランクをあげるための1つに『上位ランクのサイトと相互リンクの関係になる』というものがあります。弊社サイトへ登録 していただいてもアクセスがあがらないという理由で退会されてしまう方もいらっしゃいます。これは、とても残念なことです。直接的にアクセスは急激にあがらなくても、自分のブログの価値をあげるための1つの手段を切り離してしまっているのです。
外部リンクはアクセス数以外でも検索上位表示やページランクをあげるためにも1つの重要な項目となります。
SEOはそれなりの役目があります。だから、自分でできる範囲のことは自分でしておく。これで良いかと思います。
ネットショップ、ホームページ製作のことならお問い合わせください!
★デモサイトはこちら からご覧いただけます。
★ネットショップ・ホームページ製作のお問合せはこちらへ 株式会社トータルセオリー
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル ↓
第1回「SEOは大切なのだろうか?」
このカテゴリ『PC&Webニュース』では、Web製作者と運営者側の立場からいろいろな目線で、できるだけ読んでいただく方が得するためになる話を書いていこうと思います。
第1回「SEOは大切なのだろうか?」
Web製作をしていると、依頼される方より「特にSEOを強化してほしい!」という案件があります。まずSEOとは検索エンジン最適化の略です。この検索エンジンを最適化して反映してもらうことは重要なことですし、WWWの基準に沿った構造化したページを製作することも製作者としては大切だと思います。だから、僕も常にこういったことは勉強をしています。
ですが、依頼される方の中にはSEOを強化したら自分のサイトが『水を得た魚のように生まれ変わる』と思われている方が案外、多いことには驚きます。ここで、皆さん冷静に考えてください。SEOを強化したら『水を得た魚のように生まれ変わる』と言っているのは、いったい誰でしょうか?そして、この情報はどこで得たものなのでしょうか?
こういったことを依頼される方へ問うと、たいていが、SEO関連の書籍やSEO関連の業者さんのページからだと言います。では、ここには何が動いているのでしょう?「ズバリ!営利とお金です」当然ですが、これらを専門として商売としてやっている方が「無駄とか、気持ち程度にね」と言う人はいません。
パッシングになってしまうかも知れませんが、こういった商法はいろいろな業種で使われます。例えばMLM(マルチレベルマーケティング)や悪徳投資事業者などです。宗教的に相手を信じ込ませ「○○○したら、○○の夢が実現できるんですよ!」ってとにかく大きな夢を持たせます。これが・・・「あおり商法」というものです。
何十万円もの費用を支払って高いセミナーに行ったり、SEO強化を依頼すること。
残念ながら、上記のことにたいして投資対費用効果(投資した金額にたいしてのリターン)は期待できません。なぜなら、検索エンジン対策は、複数のWeb製作項目のたった1つの項目でしかないからです。
自分がのぞんだキーワードで検索エンジンに1ページ目に表示されたとしても・・・これだけで『水を得た魚のように生まれ変わる』?・・・・まず、ありえません。ですのでSEO対策とは?気持ち程度に考え・・・期待しすぎないこ
と。これ重要です!
nikai
ネットショップ、ホームページ製作のことならお問い合わせください!
★デモサイトはこちら
からご覧いただけます。
★ネットショップ製作のお問合せはこちらへ 株式会社トータルセオリー
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル↓
第10回『写真加工 腕時計』
第10回目「写真加工 腕時計」
■腕時計に高級感をだす
家にあった中古の腕時計に高級感をだす加工をしてみました。
After
★加工ポイント
中古腕時計なのであまり綺麗に撮れていませんが、ポイントは照明のあてかたと、強調する部分を明確にしています。ですが、写真は素材がもっとも重要です・・新品だときわだちます。
■ネットショップをはじめる?はじめたい方へ!
弊社では、ネットショップのオールインワン(パッケージ製作)をはじめました。
デザイン、SEO、FLASH、AJAX、受注管理、顧客管理、メルマガ配信、写真撮影、広告代行、サポート、ブランディングまで(動画もOK!)すべてセットになったネットショップ製作をお請けいたします。
★デモサイトはこちら からご覧いただけます。
★ネットショップ製作のお問合せはこちらへ 株式会社トータルセオリー
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル↓
第9回目『写真加工 快晴から悪天候へ』
第9回目「写真加工 快晴から悪天候へ」
■飛行機から撮影した空の写真
飛行機から見る雲の上は、ワタ菓子のような雲や、飛行機雲などいろいろな顔をもっています。
先日、飛行機から撮影した快晴の写真を→悪天候の写真へ加工しました。
Before
After
★写真撮影のポイント
・綺麗な風景は逃さず撮りましょう!レンズにこだわるなら風景は広角レンズが適しています。
★加工ポイント
上(快晴写真):
・綺麗な空をより綺麗にするためレンズフィルタで青を強調しています。
・若干、ゴミのような雲を修復しています。
下(悪天候写真)
・彩度を落とすことで写真全体を暗くしています。
・雷、雨を合成追加。
★Web運営や提携に関するお問合せはこちらへ 株式会社トータルセオリー
★ホームページ製作に関するお問合せはこちらへ ホームページ製作のご案内
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル↓
第8回 『写真加工 パンに高級感を』
第8回目「写真加工について パンに高級感を」
■1個100円のパン
夜食に買った1個100円のパンの写真を撮ってみました。食材写真のポイントは1番は素材、2番に照明のあてかたになります。ですが、焼きたてではないパン(ふっくら感がない)を写真に撮るとそのままの姿になってしまいます。 そこで加工で高級感をだすようにしてみました。
★写真撮影のポイント
★ワンポイントアドバイス
素材に高級感があればそれにこしたことはありません。今回はやっていませんが、作りおきしたパンを再度ふっくら感をだす方法は、パンに霧吹きをかけ、もう一度オーブンで少しだけ焼く。これでふっくら感は戻ります。 ではでは・・・。
★Web運営や提携に関するお問合せはこちらへ 株式会社トータルセオリー
★ホームページ製作に関するお問合せはこちらへ ホームページ製作のご案内
★ブログのアクセスUPを目指すなら! 女性ブログ応援サイト ファイブスタイル↓