作成者別アーカイブ: ANA

wahutop
2016年3月10日

秀逸な和風デザイン WEBサイト10選

こんにちは!WEBデザイナーのANAです。


現在弊社では和風デザインのWEBサイトを作成しています。
和のデザインは一見すると簡単そうですが、とても奥深く実際につくるとなるとなかなか難しいです。

これは私個人の意見ですが、私は和のWEBサイトがすごく好きです。
やっぱり日本に生まれたからには、ここに載せてあるような、秀逸な和風デザインがつくれなきゃ!ですね(*’ω’)


「秀逸な和風デザイン WEBサイト10選」、ぜひお客様の参考になればと思います。

 

●韓国懐石 しづる

wa1

【URL】http://sizzle-tsurumi.com/

 

韓国料理のサイトです。
細部に和の雰囲気を感じさせます。
全てのページにおいて、コンテンツの見易さが特徴的です。
伝えたいことをしっかり伝えています。

 

 

●SAKUZAN

wa2

 

【URL】http://www.sakuzan.co.jp/

 

岐阜にある美濃焼きの工房「SAKUZAN」さん。
本来製品上シックなになりそうなサイトですが、上手にモダンに魅せています。
共通して使用している細かい装飾がサイトの一体感を出していて、
今風なのに伝統を感じさせます。

 

 

●シェアバイク ミナポート

 

wa3

 

 

【URL】http://minaport.jp/

観光地などで自転車を借りることができるサービスのサイトです。
人の目線とコンテンツの動きを、少なすぎず多すぎず計算しておかれています。
基本写真で魅せていますが、説明部分などでイラスト使用しているのであたたかみがあります。

 

 

●ヤヱガキ酒造

 

wa4

 

【URL】http://www.yaegaki.co.jp/sake/

 

兵庫県にある酒造の会社。
写真と、サイトカラーの白、黒の文字がはっきりしているサイトで、
シンプルなのにインパクトがあります。

テキストと効果的な写真の使い方で、商品の良さを伝えています。

 

 

●榛原

 

 wa5

 

【URL】http://www.haibara.co.jp/

 

東京にある200年以上つづく和紙舗さん。
赤の中でもピンクや紫にちかいビビットの効いた色使いで、サイトを見た瞬間から目に飛び込んできます。

和の雰囲気の中にも使用しているアイコンや背景などは可愛らしくまとめていて、固くなりすぎない配慮が見えます。

 

 

●白玉の湯 華鳳

 

wa6

 

【URL】http://www.kahou.com/

 

すごくクオリティの高いサイトです。
見せ方を十分に理解して作成されています。
ひとつひとつのデザインが繊細で細やか、背景一つ、文字一つとっても文句のつけようがありません。

情報量が多いのにまとまっていて、際の見易さもピカイチですね。
私個人でいうとお気に入りのサイトの一つです。

 

 

●本家 尾張屋

 

wa7

【URL】https://honke-owariya.co.jp/

 

京都にある和菓子屋さん。
フォントの使い方、言葉の選択にセンスを感じます。
スライドの中にテキストがあって、スライドショーが切り替わるようになっています。
スライドの中に文字があるのに邪魔してないのがまたいいですね。

 

 

●角館 伝四

 

wa8

【URL】http://denshiro.jp/

 

桜皮を使用して樺細工を創っているお店です。
写真の良さはもちろんあるんですが、その写真をしっかり活かしてシンプルにつくり上げています。
構成がすばらしいので、ユーザーも迷うことなく見たい商品にたどり着けますね。

 

 

●鈴乃屋

 

wa9

【URL】http://www.suzunoya.com/753/index.php


七五三に向けた子供用の着物を紹介するサイトです。
着物と聞くと、和のテイストを前面に押し出したサイトが良く見られますが、
子供が対象ということもあり、ポップで可愛らしいそれでいて和の要素を残しています。

なんといってもグリッドデザインが効果的に使われているサイトです。

 

 

 

●株式会社ドングリ

 

wa10

 

【URL】http://www.don-guri.com/doncon/

株式会社ドングリのコンサルティングのページです。
手の込んだサイトで、ひとつひとつのキャラクターを作るのにどれくらいかかったんだろう…と
心配になるほど細かいところまでしっかりとつくられています。
見ていておもしろいサイトですね♪

 

 

どうでしたか?秀逸な和風デザイン WEBサイト10選。
日本の良さを改めて再確認できるWEBサイトばかりでしたね!

 

みなさんもぜひお気に入りのWEBサイトを見つけてみてください♪

 

それではANAでした~

blogImg
2016年3月5日

アニメーション終了後にサイトを表示させる方法

こんにちは!WEBデザイナーのANAです。

今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。

アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。

ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない!

 

というわけで、簡単なやり方でなんとかできないか?と思いやってみたのが

「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。

つまりどんなことがしたいかというと、

サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す

 

と言う流れ。

今回Bike GIFをお借りして簡単に方法をご紹介しようと思います!

 

 

 

アニメーションを表示させる

 

anime1

まずはここから!
先ほどのアニメーションをサイトに入れておきます。

で、アニメーション終了後に表示させたいソースも書いておきます。

HTMLは以下のような感じ。

<div class="anime">
<img src="http://smile-design.bz/tight/blog/anai/bicycle-gif.gif"/>
</div>
<div class="mainSite">

アニメーションが終わったらこれが表示されます。
</div>

css


body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #E9E3E3;
 position: relative;
}

.anime img {
 display: block;
 position: absolute;
 top: 28%;
 left: 40%;
}

.mainSite {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #FC6;
 position: relative;
}

.mainSite p {
 font-size: 160%;
 color: #FFF;
 position: absolute;
 top: 42%;
 left: 40%;
}

 

今こんな風にサイトが見えています。

【URL】http://smile-design.bz/tight/blog/anime1.html

 

 

 

 

アニメーションを○○秒後に消す!

 

anime2

 

 

では次のステップ!

以下のjQueryでsetTimeoutを使用します。

$function(){
setTimeout(function(){
                  ここに処理をかくよ!
},5000);//5秒数後
});

 

 今回は約4秒後に、自転車のアニメーションをフェードアウトしたいので以下のように指示をします。

 

$function(){
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

 

 

たったこれだけでアニメーションが指定した秒あとにフェードアウトして消えてくれます。

 

 

 

 

ただ問題が、確かに約4秒後にアニメーションは消えて次の要素が出てきてくれるのだけど、
アニメーション再生中もスクロールしてしまえば、下にある要素が見えてしまう。

 

しかも、フェードアウトしたあとの、要素の出方がぱきっとしている…。

 

 

気にいらない私はもうひと加え!

 

 

 

アニメーションを再生中は下のコンテンツを出さない!

 

やり方としてはjQueryでcss指定してあげる。

 

 

アニメーションが再生中は下のコンテンツは非表示にするという指示を出してあげればいいのです。

$function(){
$(".anime").css("display", "none");//アニメーション中は非表示
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

こうすれば、アニメーションが流れている間は消えています。
ただ、これだけの指示だとずっとdisplay:noneで
非表示のままなので、3.8秒後に表示する指示を出してあげます。

 

 

しかも、ただ出すわけでは面白くないのでフェードインして表示させます。

 

 

 

 

 

メインのコンテンツをフェードインさせながら出そう!

 

bicycle-gif

ここでも同じくsetTimeoutを使用します。

$(function(){
 $(".mainSite").css({opacity:'0'});
 setTimeout(function(){
 $(".mainSite").css("display", "block");
 $(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示
 },3800);//約4秒後に
});
約4秒後にコンテンツを表示、そしてフェードインさせるという指示を出しています!
この指示をしてあげれば~!

 

 

 

出来ました~!
無事に完成です!

 

こんなに簡単にできるんですね♪
みなさんもぜひsetTimeoutを使っていろんなことをしてみてください!

 

 

それではANAでした(*’▽’)
animeImg
2016年2月12日

css3でアニメーションを実装してみた!

こんにちは、WEBデザイナーのANAです。

 

今回は、css3でアニメーションに挑戦します!

昨年、一昨年とフラットデザインが流行してから、背景一色のデザインが多く見られるようになりましたね♪
そこで、背景一色の静止画も素敵なんですが、ものによってはその背景が自動で変化すればもっと面白くなり、目を引くのになぁ~と思っていたところにcss3でアニメーションをしてみようということになったので、今回挑戦してみました。

 

code-1076533_640

 

 

CSS3 キーフレームアニメーションについて

ここでは、要素を少しづつ変化させるアニメーションをご紹介します。

css3の『animation』プロパティでは、キーフレームというものを設定することで細かい動きを付けることができます。

細かいとこまでってどこまでかって?
それがアニメーションの時間やタイミングまで、本来ならばJavascriptやjQueryを使って行うところまでcssでできてしまうんです~!!

感動!!( ;∀;)

 

anime2g

 

 

キーフレームって何?

css3はわかるけどキーフレームって聞いたことない!
キーフレームアニメーションってどういう意味?

と思っているあなた!

キーフレームとは、通過点のこと。

つまり、アニメーションの中で変化が定義されているフレームのことなんです。

各キーフレームで要素がどう変化するかは @keyframes という@規則で定義します。

 

ここで大切なのがアニメーションとそのキーフレームを一致させるためには、@keyframes 規則の名前と、要素に指定する animation-name プロパティの名前を一致させる必要があります。

 

この規則の名前は「@keyframes + 任意の名前」で宣言します。

キーフレームの情報を0%〜100%の%表示で書いていきます。

0%はアニメーション開始時、100%は終了時です。

css3でグラデーションを使用するときもこんな感じなのでなんとなくだけどわかりやすいですよね♪

ちなみにcss3でグラデーションのように、0%は from、100%は to という書き方でもOK!!

例えば、

@keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

とこんな感じ♪

 

ちなみに、ChromeやSafari等のWebKit系ブラウザーでは、ベンダープレフィックス(-webkit-)が必要です。

@-webkit-keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

ChromeやSafari向けになるとこうなります。

 

 

animation関連のプロパティについて

 

●animation-name

@keyframes で定義した名前を指定します。
これをちゃんと指定しておかないとアニメーションは動きません。
なのでここはしっかり決めておきましょう♪

 

●animation-duration

アニメーションを動かす時間の長さを「秒数+s」で指定します。

例えばこんな感じ

body {
 animation: grade 5s;
}

 

注意するべきが、この値が0だと実行されません。またマイナスなどの負の値を指定しても0として扱われてしまうので、実行されません。気を付けてください。

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-timing-function

アニメーションをどのようなタイミングで出すか、どうやって進めるかを指定します。
ここで滑らかな動きなどを調整できます。

値は以下の通り~

  • ◆ ease-in
  • ◆ ease-out
  • ◆ ease-in-out
  • ◆ linear

 

 

●animation-delay

ページ(要素が)読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定(「秒数+s」)の仕方になります。

 

 

●animation-direction

animation-directionはアニメーションを繰り返す方向が指定できます。

  • ◆ normal … 通常の方向(初期値)
  • ◆ alternate … 奇数回で通常・偶数回で反対方向に再生(行ってきて行ってきてという具合)
  • ◆ reverse … 逆方向
  • ◆ alternate-reverse … alternate の逆方向

 

●animation-iteration-count

アニメーションの繰り返しを指定します。

ループにするにはinfinite を指定すれば無限にループされます。

 

 

●animation-play-state

アニメーションの一時停止や再生中(running)が指定できます。

 

 

●animation-fill-mode

アニメーションの再生前後の状態が指定できます。

  • ◆ none(初期値)
  • ◆ forwards … 再生後、最後のキーフレームの状態を維持する
  • ◆ backwards … 再生前、最初のキーフレームの状態を適用させる
  • ◆ both … forwards と backwards の両方を適用する

 

では、実際にcss3でアニメーションを実装してみましょう♪
背景色を変更していくアニメーションを実装します。

 

 

css3でアニメーションを実装!!

animation関連のプロパティを覚えたところで、実装してみます。

キーフレーム名を「grade」とし、0〜100%までで推移させる背景色を設定します。

 

@-webkit-keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF; }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}
@keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}

ページ全体で色の変化を見てもらうためにbodyに、animationプロパティを指定します。

body {
 background-color: #FF9999;
 animation: grade 5s infinite;
 -webkit-animation: grade 5s infinite;
}

下記のリンクをクリックすると今回行ったアニメーションを見ることができますので、ぜひ見てみてください♪

 

一色の背景パターンのときなどに使用するといいアクセントにもなるし、ユーザーの印象にものこりやすくなります。ぜひみなさんも実装してみてください。

【URL】http://smile-design.bz/tight/grade.html

それではANAでした~(^^)/

blotop
2016年2月1日

まるで映画!動きが面白い&大胆なWEBサイト10選!!

こんにちは、WEBデザイナーのANAです。

 

今回はまるで映画!動きが面白い&大胆なWEBサイト10選をご紹介したいとおもいます。

 

今年は、ユーザーが使いやすいことはもちろんのこと、さらに進化したパララックスや、色使いがパステルカラーがトレンドといわれていますが、みなさんはどんなWEBサイトが好きですか?

 

昔のように最近はただ画面上に表示するだけではなく、見せるところはしっかりと見せつつもUX/UIを意識した体験型のWEBサイトが増えてきています。

 

ご紹介する10選の中にお気に入りのサイトが見つかるかもしれません♪

ぜひ見てみてください。

 

 

 

1.羽田ターミナル60周年を記念したサイト

 

1

【URL】http://haneda-terminal60th.jp/

 

歴史を感じさせるサイトのつくりになっています。

年代を円で表現し、私たちが普段利用している羽田ターミナルが歩んできた歴史をしっかり伝えています。

とてもユーモアのあるサイトです。

 

 

2.神戸市×攻殻機動隊新劇場版のコラボサイト

 

2

【URL】http://kobekokaku.jp/

 

士郎正宗さん原作の『攻殻機動隊』というアニメとこのアニメが舞台になった兵庫県神戸市のコラボサイトです。

数字が羅列する画面が終わるとまるでゲームのように3Dに世界に引きずり込まれます。

ナビゲーションも立体的で、ユーザビリティはしっかりしているのに、動きの多いわくわくするサイトです。

 

 

 

 

3.ANA×スターウォーズのコラボサイト

 

3

【URL】http://ana-planet.com/

 

自分が宇宙にいるような感覚を覚えるとてもクオリティの高いWEBサイトです。

自分の行きたい国をクリックすると場所によっては飛行スケジュールを見ることができます。

またスターウォーズファンにはたまらない、ゲームを集めるといったゲームも盛り込まれていた全体的に楽しめるサイトとなっています。

 

 

 

4.The Boat

 

4

【URL】http://www.sbs.com.au/theboat/

 

パララックスがここまで進化したのか…!とびっくりさせられるWEBサイトです。

スクロールしていくと物語がはじまります。まるで映画ですね…!すごい!

長いですが読める人は最後まで読んでみてください!

 

 

 

5.かまぼこのサイト

 

 5

【URL】http://kama1000.jp/

 

なんともユーモアのあるかまぼこのサイトです笑

見た瞬間からなんだか笑ってしまいました。とってもおもしろい笑

しかもキャッチフレーズなどの言葉のチョイスも私的にはすごく好きです。

インパクトのある言葉。

そして何より最初から最後までかまぼこ尽くしなのにかまぼこ感をまったく感じさせない面白いサイトです。

 

 

 

6.NHKスペシャル!新・映像の世紀

 

 7

【URL】http://www.nhk.or.jp/special/eizo/

 

このサイトも最初みて忘れられなかったインパクトの強いサイトです。

細かいところまで動画の配置にこだわってつくられているかなりすごくサイトだと思います。

NHKさすがですね。マウスの動きも使いやすいし、アプローチの仕方も抜群。

クリックしてみてみてください。

 

 

 

7.MUSIC FOR A  DYING STAR

 

6

【URL】http://almadyingstar.jp/

 

南米チリの砂漠にある世界21の国と地域が共同で作り上げた史上最大規模の電波望遠鏡「アルマ望遠鏡」のWEBサイトです。

幻想的で見るものを魅了します。思わず闇の中に吸い込まれてしまいそう。

ふわふわと漂う星になった気分です。

 

 

 

8.北千住デザイン

 

8

【URL】http://kitasenjudesign.com/

 

北千住をベースに活動するデザイン集団「北千住デザイン」のWEBサイト。

ユーザーインターフェイスはシンプルなのに、掲載されているコンテンツの数と多彩さが、見ている側を圧倒するびっくりするWEBサイトです。

これだけ掲載作品数があれば、制作者の得意分野や技術力も伝わってきますね~。感無量です。

 

 

 

9.田渕 将吾さんのポートフォリオサイト:s5-style

 

9

【URL】http://www.s5-style.com/

 

S5-Styleは田渕 将吾さんのポートフォリオサイトです。

サイトひとつを見せるにも細かくこだわっているWEBデザイナーらしいWEBサイトだと思います。

田渕さん自身、

  • Art Direction
  • Web Design
  • Frontend Development
  • Illustration

といっていてとにかくなんでもできる人なんですね~。尊敬します。

私もしっかりしたポートフォリオ作らなきゃ!

 

 

10.スイスの航空会社のWEBサイト

 

10

【URL】http://www.world-of-swiss.com/ja

 

も~う!どんどんスクロールしたくなるすごい面白いサイトです。これもパララックスが進化してますね。

こういったものを見るとWEBでできないものはもうないんじゃないかと思ってしまいます。

アプローチの仕方を変えれば、どんなことでもできそうですよね!

 

 

 

みなさんもおもしろいWEBサイトを見つけてみてくださいね♪

 

それではANAでした~!

blogtop2
2016年1月22日

起業してホームページを持とうかお考えの方へ~第4弾~

こんにちは、WEBデザイナーのANAです。


今回は起業してホームページを持とうかお考えの方へ~第4弾~『自分でホームページをつくるには』についてお話します。

 

Old rangefinder photo camera  http://barnimages.com/

 

 

起業をして、ホームページを検討している方で、『業者に頼むとどうしても高くつくし、自分でホームページを作ろうかな~』と考えている方もいると思います。

 



誰しもみんな、”お金をかけたくない”というのが、一番大きな理由だと思いますが、ホームページを自作するとどのくらいの時間や労力がかかるのか?

そして何より作ったホームページで売り上げを上げることが出来るのか?ということに着目してみました。

 

 

 

 

 

ホームページを自作するとどれくらいの時間がかかる?

 

 

Closed moleskine http://barnimages.com/

 

 

イチからホームページを自作する場合、ホームページをつくる作業に多くの時間がかかり、そしてそれ以外にも時間がかかります。

 

まず何より、たくさんの知識が必要になるので、それらを覚えなくてはいけません。

また、デザイン的にも標準クラス以上のものでなければ、仮にホームページをつくったとしても、第一印象でホームページにきたお客さんに逃げられてしまいます。

 

知識と技術をなんとか身につけて完成させたとしても、ほとんどの場合、出来上がりはプロが作っものに比べるとかなり見劣りするものになります。

 

http://barnimages.com/

 

 

実際にどのくらいかかるのか、「ホームページをつくろうと思っている!」という友人に話をもちかけてつくってもらいました。

 

友人はとてもこだわる人なので、まず写真撮影からはじめます。

その日は、それだけで終わってしまいました。

平日は仕事なので、お休みを利用して、ホームページの基礎知識を身に着けながら実際に自分で触ってみてつくってみたそうです。

 

Working with laptop http://barnimages.com/

 

 

とてもセンスのある友人ですが、デザインしている段階でまず1ページつくるのに20時間ほどかかったそうです。それからまた構想に悩み、いろんな競合サイトをみては路線を変更し・・・。

 

創っている時間、考えている時間、ホームページの素材を探したり、写真撮影している時間、すべてを合計して150時間以上かかったそうです。(概算ではありますが)

この結果的にホームページを作るには大体150時間くらいはかかるのではないかと思います。

 

さらに、お休みの日もホームページをつくる時間にあててしまったり、最初は順調にみえたホームページ制作も後半になると「妥協・妥協の繰り返しになってしまった…」と残念そうに言ってました。

 

1280

 

友人は最後までホームページを完成させましたが、プロの目から見ると1日で終わってしまいそうな、そんなに苦労してつくったものとは言えないものでした。


ちなみに、ホームページを作った時間が大体150時間で、これを時給1000円で計算し、150時間働くと、15万円です。

それだけの時間をかけるならば、プロに依頼するほうが賢明だと私は思います。

 

 

 

 

 

 

「なんとかホームページつくったのに、アクセスが全然ない!」

 

90

 

ホームページは形だけ作ればいいというわけではありません。

ドメインの取得や、サーバーの契約、更新作業、Googleアナリティクスを導入したり、ウェブマスターツールへの登録も必要です。

ホームページを作るにはHTMLやCSSだけでなく、もっともっと幅広い知識が必要なのです。

 

 

 

 

ホームページを自作することに時間をかけるよりも、大切なことがある

 

ホームページを自作するための知識や技術を習得するより、起業したご自分の得意分野でのスキルを上げることが大切なのではないかと私は考えます。

自分の強みを経験にしたほうがほうが効率がいいからです。

「餅は餅屋」という言葉がありますよね。

そうなんです。ホームページもホームページ制作会社に任せてしまうほうが、結果的にみるとお得なんです。

それでも、『どうしてもホームページを自分でホームページをつくってみたい!』とおっしゃるのならば、無料のサーバーを借りて、まず趣味のページを つくってみてはいかがでしょう?

 

0185

 

深く考えずに、好きなように5ページくらいのものを制作してみてください。



趣味なので誰にも見られなくても構わないですし、会社の信用を落としたりする心配もありません。

 

やってみてホームページをつくるのが面白く、もっともっと深く勉強したいと思ったら、自分の会社のホームページをつくってみるてもいいかもしれません。


もし、しっかりしたホームページをつくりたい、そして尚且つ、効果を上げたいのであれば、プロの仕事を活用すべきだと思います。

 

 

 

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

 

見積もりも無料です!

 

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ

 

今回で”起業してホームページを持とうかお考えの方へ”は終了です!

みなさま、お付き合いありがとうございました。

 

4回にわたってお送りさせていただきましたが、みなさんのお役に立てたでしょうか?

これからもためになるお話をどんどんさせていただきたいと思います♪

 

 

それではANAでした~!

 

blogtop
2016年1月13日

起業してホームページを持とうかお考えの方へ~第3弾~

こんにちは、WEBデザイナーのANAです。

今回は起業してホームページを持とうかお考えの方へ~第3弾~『ホームページをつくることで効果はでるのか』についてお話します。

 

work-731198_1280

 

 

これから起業をする方も企業をしたばかりの方も、ホームページを作ることで一体どのくらいの効果が期待できるものなのか、気になるところですよね。

 

「ホームページを作ったけれど、アクセスが無い」
「せっかくお金をかけてつくったのに、ホームページへの宣伝広告費にまたお金がかかる」

 

などの悩ましい声もよくお客様から耳にします。

 

また、ホームページをマーケティングとして活用したいのに、
ホームページに人を集めるためのマーケティングやコンサルティングをしている方もたくさんいらっしゃるのが現状です。

 

でもお金をかけずにやる方法はあります。

 

ホームページをつくる上で必要なもの5つ

でもご紹介しましたが、その話はまた後ほど…。

 

 

ホームページをつくることで得られる効果は結論からいうと…

 

business-925900_1280

 

ずばり、結論から申しますと、ホームページで得られる効果は、

①業種
②競合性

に大きく関連してきます。

売上・集客の効果が出にくい「業種」「競合性」とはどういうことなのか

 

ここで仮定のお話。

郵便ポストの数より多いといわれている”美容室”。
特に日本で一番美容室が密集しているのは埼玉県の北浦和だといわれています。

 

例えば、あなたが「北浦和で美容院」を開くのでホームページをつくって集客をしたいと考えているとします。

その場合、まずGoogle、またはYahoo!で「北浦和 美容院」で検索し、
1ページ目にあなたのホームページが来るようにすることが一つの目標です。

「え、まずそこからなの!?」

とお思いの方もいらっしゃるかと思いますが、なんとこの場合1ページ目に出すことさえ至難の業なのです。

 

なぜなら、日本で一番美容室が密集している北浦和では「競合性」が高く、非常に難しいからです。

 

9690be70a8e686b4f4ab6eb7b2cd4be0_m

 

 

そういった現実での土地が商業的に激戦区の場所では、ネットの世界でも”検索キーワード”という点で、激戦区の場合がとても多いです。
そのため、ホームページをつくればすぐお客さんが来てくれる♪というのは難しいでしょう。

 

だったらホームページ要らないよ…

 

と思ったあなた、ちょっと待ってください。

ホームページをもっておくことでメリットとなることもたくさんあるんです! 

例えば、来店してくれたお客さんが、SNS(Facebookやtwitter)、RELEASEなどでお店についての記事を投稿してくれた場合。

 

ホームページをもっていれば、Facebookやtwitter、RELEASEなどでURLも一緒に載せてくれるかもしれません。

 

そうなればお店の場所やメニュー内容などの情報が多くの人に拡散されます。

 

訪れたホームページで、お店や会社の魅力が掲載されていれば、『行ってみよう!』という人が出てくるかもしれません。

 

ここでホームページがあるのとないのとでは、お店や会社のことが広がる範囲も、スピードも全然違ってくるのです。

 

では、逆に売上・集客の効果が出やすい「業種」「競合性」

 

競合が少なければ少ないほど、ホームページをつくることで大きな効果が得られることがあります。

例えば、「 博多で花火専門店」を開いたとしましょう。

特殊な業種であり、都会のど真ん中にはなかなかないお店です。
「花火専門店 博多」のキーワードで、GoogleやYahoo!に1ページ目に出ればいいので、先ほどの美容室とはちがいこれはかなり容易だと考えられます。

 

fireworks-227383_1280



もし、起業したあなたのお店や会社が、ネット上での検索キーワードで競合性も低く、希少なジャンルの業種であれば、ホームページをつくるべきでしょう。



ホームページを見てお客さんが「来店した」り、「電話やメールフォームでお問い合わせがきた」という流れができれば、それは成功しているホームページです。

 

まず、ホームページをつくったらこれをやってみよう!


もちろんお金をかければ、集客はできます。
Yahoo!やGoogleなどに広告を打ち出したりすれば、自然とつくったホームページを見る人は増えます。


しかしながら、それができない方が多いのです。
では、お金をかけずにホームページを知ってもらうためにはどうすればいいのか?

①ホームページをオープン(又はリニューアル)したことを人に伝える。
②FacebookやTwitterなどのSNSを使用して、つながりのある人に周知する。
これだったら無料で、しかもすぐにできますよね!

これをするだけでも、なにもしないのでは反応が全然ちがってくるんです。

 

writing-926116_1280


SNSや来店したお客さんなどに、口で呼びかけを行い、お礼の手紙やはがきに、
ホームページのURLを載せて出せば見てくれる人もいます。

効果が出ているホームページは”つくって終わり”ではなく、つくってからがスタートです。

 

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

見積もりも無料です!

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ

 

次回は最後、④自分でホームページをつくるにはをご紹介します♪

それではANAでした~!

 

20151225
2015年12月25日

起業してホームページを持とうかお考えの方へ~第2弾~

こんにちは、WEBデザイナーのANAです。

今回は起業してホームページを持とうかお考えの方へ~第2弾~『ホームページを制作するのにかかる費用』についてお話します。

 

準備をかけて起業をしたのはいいけれど、集客に悩みを抱える方は多いと思います。
そして「集客するためにホームページつくろう!」と考える方も多いと思います。

 

では、そのホームページをつくる費用はいくらかかるのでしょうか? 

 

photo-1416339442236-8ceb164046f8

 

 

DESIGN OFFICE TIGHTでは、”まるごとパック”をおすすめしております。

パソコンはもちろんのこと、スマホサイトも一緒になったお得なプランです。
詳しくは、プランページをご覧ください。

 

 

さらにホームページの制作費用とは別に、レンタルサーバーと、ドメイン使用料金が年間約4000円ほどかかります。

「レンタルサーバーって?」
「ドメインってなんのこと?」

とお困りの皆さん。少し掘り下げてご説明いたします。

 

 

【仮定として】
・ホームページを『家』
・レンタルサーバーを『土地』
・ドメインを『表札』

とします。

説明

家を建てるときに必要になるのが、”土地”ですよね。
土地が無ければ、家を建てることができません。


ホームページも一緒です。
ホームページをつくるときには、家を建てるところでいう土地が必要になるのです。
これが『レンタルサーバー』。

 

 

 

次に家を建て終わったら、最後に「ここは自分の家だ!」という証として表札が必要になります。
表札がなければ誰の家なのか?、人が住んでいるのか・いないのか?がわかりません。

 

 

 

ホームページで表札の代わりをしてくれるのが、『ドメイン』というものです。
具体的にいうとhttp://〇〇〇〇.jpというものです。

ネットにアクセスしたことがある人なら一度は見たことがあると思います。

この『レンタルサーバー(土地)』と『ドメイン(表札)』がそろってはじめて、『ホームページ(家)』をつくることができるのです。

 

このようにしてホームページを作成していきます。
そして、ホームページを開設して1年ほどが経過しますと、安定した集客力がでてくることも稀ではないのです。マクロ視点で見ると、ホームページはかなりコストを抑えた広告としての威力を発揮するのです。


商品やサービスに”絶対”の自信があれば、ホームページをお持ちください! 

 

student-849821_1920

 

 

ホームページ制作費用ははっきり申し上げまして、お安い値段とはいえません。

しかしながら、もし起業したそのビジネスやサービスが 良いものであり、そして多くの人に喜ばれるあれば、ホームページにかけた費用は必ず回収できます。

ホームページをつくるにあたって、どのように自社の商品やサービスをアピールするのが良いのか、ページ構成はどうするのがベストなのかなどのご相談もお受けいたします。

見積もりも無料です!

これからホームページを創ろうとお考えの方は、ぜひ一度お問い合わせください。
お問い合わせ


次回は③ホームページをつくることで効果はでるのか、をお話させていただきます~!



それではANAでした!

 

40
2015年12月5日

起業してホームページを持とうかお考えの方へ

こんにちは、WEBデザイナーのANAです。


今日は、タイトルの通り、これから起業する方、最近起業した方にホームページの必要性を以下の4項目にわたってお話させていただきます。


①起業してホームページを持つメリット
②ホームページを制作するのにかかる費用
③ホームページをつくることで効果はでるのか
④自分でホームページをつくるには



もし起業してホームページを持とうかお考えの方は、DESIGN OFFICE TIGHT(デザインオフィス タイト)にお問い合わせください。
お客様に一番あったプラン、価格でホームページを制作させていただきます。



起業している、またはこれから起業するけれど、ホームページを持とうか迷っている方は、下記フォームよりお問い合わせ下さい。 無料でご相談をお受けいたします。
【お問い合わせ】

 

では、今回はまず①起業してホームページを持つメリットについてお話いたします。


起業してホームページを持つメリットとは? 


起業家にとってホームページを持つことは、名刺を持つことと同じに値します。

もちろん、名刺に比べると少しコストはかかりますが、それを上回るメリットがたくさんあるのです。

2

ではそのメリットとはなんなのか?

1つ目、ホームページがあることでしっかりしてる会社だという信頼感を持ってもらえます
このご時世、ホームページを持っていない会社のほうが少ない中で、やっぱりお客様や会社にかかわる方からするとホームページを持っているのと、持っていないのでは全然信頼度が変わってきます。


名刺になどにも、会社の所在地、電話番号、FAX番号、担当のメールアドレス以外に、ホームページのURL(http://〇〇〇.com)が載っていることが多いですよね。


名刺を渡した相手に「ホームページはありますか?」と聞かれて、「ありません」というのと「ありますよ、名刺のURLにぜひアクセスしてみてください!」というのでは全然印象が変わってきます。


「この会社は、ホームページがないし、いざというとき大丈夫かな?怪しいところだったら・・・」
と考えてしまう人もいるのです。

ホームページがあることで信頼感が全然変わってきますよね!




OOK82_gurafuwoyubisasu20131223-thumb-1000xauto-16525

2つ目、宣伝や集客効果があり、売上げにつなげることができます。
これはホームページの最大の役割でもあります。
ホームページは24時間営業の会社の顔です。
いつ、どんな場所でもインターネットという環境さえあればたくさんの人が見ることができます。


何かのキーワードで検索したときに上位表示されると、1日にたくさんの人が、ホームページを見ます。
そこで、あなたの会社のサービスや製品を吟味してくれます。 
「ホームページを見て、興味を持ち、お店に足を運んだ。」
「素敵なホームページだったので、お話を聞くことにして、結果契約を結んだ。」
という話も少なくありません。


そのホームページにショッピングカート機能や、ご予約・お問い合わせフォームなどがあれば、電話対応などの手間も省くことができます。


 

photo_00984

3つ目、ホームページで自社の商品やサービスの説明をあらかじめしているので、商談が成立しやすくなります。ホームページを見ていない商談相手と、見ている商談相手とでは話の進むスピードが違います。


契約を結ぼうとしている相手も、自社のサービスや製品の特化してる部分やこだわりをわかって商談するので、通常よりも成立するスピードも商談時間も早くなります。
また、手始めの説明もお客さんが事前の知識として知っている場合が多いので、より深い内容の話をすることができます。



今回は「起業してホームページを持つメリット」についてお話させていただきました。
これからホームページを創ろうとお考えの方はぜひ、参考にしてみてくださいね♪


 

次回は②ホームページを制作するのにかかる費用をお話させていただきます~!



それではANAでした!


20151126
2015年11月26日

写真を油彩画や水彩画にできる、Topaz Impressionがすごい!

こんにちは、WEBデザイナーのANAです。
今回は写真を油彩画や水彩画にできる、Topaz Impressionをご紹介します。

WEBサイトを日ごろから見ている方は知っている人もいるかもしれませんが、水彩画や油彩画っぽいサイトを見かけることってありますよね?

そういったサイトはどれもおしゃれでかっこいいです。
ただそういった”画”、いったいどうしているのでしょうか?

実際の油彩画や水彩画を使用して創られているサイトももちろんありますが、Topaz Impressionというツールをしよう使用すれば、写真を簡単に水彩画や油彩画のようなタッチの素材を作ることができます。

私たちデザイナーは普段、Photoshopでも写真を手描き風に加工する技術をもっていますが、
短時間でクオリティの高いものができるかと言われればそうではありません。

やっぱり調整は必要ですし、あんまりいじりすぎるとおかしくなってしまいます。

だからこそ、こういったツールがすごく便利です。

 

 

Topaz Impressionとは?

ana1

先ほども説明しましたが、Topaz Impressionは持っている写真や画像を手描き風の油彩画や水彩画に簡単に加工することができるツールです。

 

彩画や水彩画にしたい画像や写真をを選択して、好きなフィルターを選べばOK♪
プリセットのフィルターでも充分ですが、ブラシを変更したり、色やキャンバスを変えたりして、細部まで調整できます!
ここがまたよいところですよね♪

 

 

どんな感じになるの?

下記の画像は実際に本サイトに載っているものです!
クオリティ高いですよね…

これでサイトをぜひ作ってみたいです♪

slide16bna

slide11bna

slide10bna

slide3bna

slide12bna

 

 

無料体験版を使ってみましょう!

Topaz Impressionは有料で、$99.99かかります( ;∀;)
便利なツールは有料ですね笑

でも30日間は無料で試せるので、どんなものなのか見てみたい、触ってみたい!という方は、ホームの「or start my free trial」リンクをクリックし、メールアドレスを入力すると無料体験版としてダウンロードできます。

ぜひ使ってみてくださいね!

それではWEBデザイナーのANAでした~(*’ω’*)ノシ

myojyowaraku
2015年11月16日

明星和楽2015に参加してきました!

こんにちは、WEBデザイナーのANAです。
今回は2015年11月14日に開催された「明星和楽2015」に参加してきました。
明星和楽はいわば「大人の文化祭」のようなもの。福岡のいろんな場所でいろんなことをしています。

 

明星和楽とは?

明星和楽とは「テクノロジーとクリエイティブに関わる人々が集まる」ことを目標に2011年に開始されたフェスティバルです。
無機質なテクノロジーではなく、「クリエイティブに触発され、感性を揺さぶるテクノロジー」を生むための環境を生み出します。「テクノロジーにはアートやクリエイティブなどは関係ない」と思われがちですが、人がテクノロジーに触れるきっかけを作るためには、まず、魅力的であることが必要となってきます。︎ 明星和楽では「テクノロジーをどうにか活用出来ないか?」と考えるよりも、「テクノロジーを魅力的に出来ないか?」というアプローチをとり、イベントを通して触れたくなるテクノロジーを作る為のマインドを育て日本、アジア、そして世界を盛り上げていく為の明日のスターを発掘・育成します。︎

いわば”テクノロジーとクリエイティブの祭典”ということ。


くわしくは
【公式サイト】http://2015.myojowaraku.net/
を見てみてください。

 

私が体験&参加してきた明星和楽2015

①360度ホラー体験
IMG_2181
岩田屋新館前にて行われていたイベントです。
11時ごろ行ったのですが、すでに体験中の男性が大きな悲鳴を上げていました。

RKBさんも来ていたようで、必死に男性を撮影中…

IMG_2182

結構大きな声で「助けてー!ごめんなさい!」と何かをかわす動きをしていました。
道行く人たちも大注目です。

この後実際に私も体験しましたがこれは悲鳴ものでした・・・。
夢に出てきちゃう!

1. オキュラスリフトとヘッドホン
視界を完全に覆うことで、360°の視覚体験が可能。ヘッドホンも装着することで、今までに味わったことのない映像への没入体験が可能になります。


2. 心拍数を測定
指先に器具を装着し値を測定。体験者の心拍数はモニターに表示され、恐怖が視覚化されます。

この二つで恐怖を直に装着している本人にも周りの人にも伝えます。
こういった発想がすごいですよね!おもしろい!笑
【360度ホラー体験公式サイト】http://360-horror.com/

②スタートアップトークショー
次はところ変わってIMSホールへ…

ここではいろんな催し物が開催されていました。

IMG_2183

タイムスケジュールはこんな感じ!
午後の部は結構大幅な時間の変更があってたけどね~。

私が聞かせていただいたのは
「スタートアップNEXTSTAGE〜成功に必要なものとは〜」
というもの。

起業したい方たちがメインで多かったようです。
トークをしている方々はお酒を片手に経営者としてのぶっちゃけトーク!
sayurin2

ゆるいんですが、内容はしっかりとしておもしろかったです。
経営者のリアルな声といった感じ。

福岡を拠点としている3社の経営者がトークセッションを繰り広げます。
・アンダス株式会社 代表取締役社長 前田哲郎氏
・株式会社Fusic 取締役副社長 浜崎陽一郎氏
・株式会社リーボ 代表取締役 松尾龍馬氏

この御三方が熱く語り合っていました。

とくに一番奥に座っている赤い皮ジャンのアンダス株式会社 代表取締役社長 前田哲郎氏はマーティングに特化した話をしていたのですごくおもしろかったです。

 


③世界一キュートなプログラマー Linda Liukas

次に聞いたのが世界一キュートなプログラマー「リンダ」さん!
写真を撮り忘れてしまったので、お写真だけ貼っておきます。

Linda Liukas. Photo: Maija Tammi

Linda Liukas. Photo: Maija Tammi

 

すべて英語でプレゼンテーションしていました~!
ところどころはなんていっているのかわかるんですが、途中からわけわかりません・・・。


なので内容は割愛させていただきます。
リンダさんの公式サイトです。ぜひ見てみてください。


【リンダさんの公式サイト】http://www.helloruby.com/

 

 



その他にもイムズホールで開催されているものをメインに参加しましたが、
今回はなかなか内容が深くて自分の勉強不足(デザイナーとしても社会人としても)を実感した1日になりました。

もっともっと視野を広げて、これから大きく成長できるようにこれまで以上に努力し続けていこうと思います。

今回参加できなかったかたは、またの機会に参加してみてください♪

それではANAでした~!

sayurin

icatch
2015年10月30日

イムズの三菱地所アルティアムで開催中の”みえないものとの対話”展へ行ってきました。

こんにちは!WEBデザイナーのANAです。

先日のお休みに、2015年11月2日まで福岡市中央区天神のイムズ8階の三菱地所アルティアムで開催されている”みえないものとの対話”展へ行ってきました。

1

朝の早い時間(イムズオープン直後:笑)に行ったので、お客さんはいませんでした。
私ひとり貸し切り状態!( `V´)ノ
ひとりでたのしみました。

この展覧会は、プログラムやWEBサービスを用いて制作を行う、1980年代生まれの若手作家たちによるものです。
ほとんど詳細を調べずに行った私は、どきどきわくわく!
チケット(一般:400円  学生:300円)を購入していざ中へ~!

最初にお出迎えしてくれたのは、ミラーボール!

IMG_2035

ま、まぶしい!!!暗い通路でくるくる回転しています。

これは今回の展覧会の作家のひとり、久門 剛史さんの作品です。
タイトルは「after that.」。

目にみえない“時間”を題材に、空間全体に無数の時計が映し出される時の流れをあらわしたインスタレーション…。

ミラーボールなる球体からは本当にかすかに時計の針の音が聞こえました。
なんだか不思議な気持ちになる、時間という概念は感じるのになぜだか時が止まったような感覚におちいりました。
なんだろうこの言葉で言い表せない感じ(O°O)

不思議な感覚を味わったまま、次のブースへ…

おっと!?!?

IMG_2037


プロジェクターに映し出されているのは、青空。
上のほうからは「チュンチュン」と鳥の鳴き声がします。

これは一体・・・
そしてこのプロジェクターの前にはトラックパッドが。

IMG_2036
トラックパッドはパソコンでいうマウスの役割をはたしていて、手で触るとプロジェクターにある矢印を動かすことができます。

この作品はオランダ生まれ、ニューヨーク在住のラファエル・ローゼンダールさんの作品「looking at something.com」で、2013年に発表されたもの。
操作して動かすことができるインタラクティブな作品で、トラックパッドに指を置いて動かすと、画面上の雨が止んだり雷雨になったりと、めまぐるしく空の表情が変化します。

プロジェクター上の矢印を上に持っていくと晴れて、下へもっていくと雷雨になる。

雨:
IMG_2038

雷雨:
IMG_2039

なんとも予測不可能なアクションです。

もう、この時点で私の頭の処理能力が追い付いていない!!!
なんという作品たちなのだ!

次は最後のブースへ…

IMG_2040

最後の作品は埼玉生まれ、関東在住の谷口 暁彦さんの作品。
iPad やiPhoneなどをモチーフに使用し、コンピューターによって作られた虚構と現実から、関係性の違和感を炙り出しています。

谷口さんのサイトも面白いのでぜひ見てみてください。
この人の作るものはなんてユニークなんだろう!久しぶりにわくわくした気持ちになりました。
【URL】http://okikata.org/

扇風機の風に揺れるiPadの画面に風で揺れるティッシュペーパー。
IMG_2042

iPadに水が流れることでアプリケーション機能のメモ帳に文字が時折入力されたりする現象をコンピューターによって作り出した作品。
a

この方の作品はコンピューターの生む虚構と現実とが曖昧になった一瞬をすごく表現していて、悲しいような嬉しいような不思議な感情が湧いてきました。

まとめ
今回”みえないものとの対話”展へ行って、想像して、そして考えるというきっかけをもらった気がします。
さまざまな角度から表現された作品たちに感化されて、またより深くWEBと向き合おうと思えました。

それぞれの作者が、どんな意図があって、何を表現したいのか、作品をみてそれぞれが何感じて考えるのか、そういったきっかけをくれた展覧会でした。

2015年11月2日まで福岡市中央区天神のイムズ8階の三菱地所アルティアムで開催されています。
今週末にぜひ足を運んでみて下さい。

それではまた!ANAでした~♪

top1
2015年10月23日

おもしろい動きのWEBサイト10選!

こんにちは、WEBデザイナーのANAです。

今回は私が選んだ、”おもしろい動きのWEBサイト10選!”をご紹介いたします。
フラッシュなどを使用すれば、いくらでもおもしろい動きのサイトは作れますが、
最近ではJavascriptやjQuery、そのほかアニメーションを使用しているいろんなサイトがあります。

これからホームページの作成やリニューアルをお考えの方や、
いずれはホームページをつくりたいと考えてらっしゃる方は是非参考にしてください。

【ソフラン アロマリッチ】
ソフラン アロマリッチ|柔軟剤|ライオン株式会社

URL : http://soflan.lion.co.jp/aromarich/

アプローチの仕方がとてもおもしろいサイトです。
花びらを立体的にみせて、まるで一緒に香りまで漂ってくるような・・・。



【ホムンクルス】
homunculus Inc.   株式会社ホムンクルス
URL : http://homunculus.jp/

ファーストインプレッションがとても強いサイトです。
一度みたら忘れられません。なんだか引き込まれてしまいますね。



【ぷるぷるSPARKLINGゼリー】
ぷるぷるスパークリングゼリー   白鶴酒造株式会社
URL : http://www.hakutsuru.co.jp/purupuru/

ドリンク飲料のキャンペーンサイトです。
名前のごとくプルプルした動きを使用して、よりユーザーに商品の良さをアピールしています。



【リプトンスイーツティー】
【新発売!】リプトン スイーツティー |Lipton(リプトン)
URL : http://brand.lipton.jp/leaf/sweettea/

ひとつひとつのアニメーションに加えて、スクロールの動きまでもが面白いサイトです。
動くだけでなく、しっかりと商品の良さを伝えています。

【株式会社ココノヱ】
株式会社ココノヱ - coconoe inc.
URL :https://9ye.jp/

企業サイトです。とにかく動きが多くて見ていて飽きません。
黒と濃い目のピンクを使うことで、動きは多いですがサイト自体に締りがあります。


【miami】
MIAMI
URL : http://www.sip-miami.iis.u-tokyo.ac.jp/

義足をつくっている会社のキャンペーンサイトです。
背景の細かい粒子の動きがありながらも、サイトの中身自体はしっかり読めます。
良く構成されているサイトです。



【DREAMTEAM】
DreamTeam Katarzyna Konkowska
URL : http://dreamteam.pl/

ユーザーが予想のつかない動きをするサイトです。
次はどうなるんだろう?とわくわくしながら、クリックやスクロールができます。



【IBUKI】
IBUKI イブキ|資生堂
URL : https://www.shiseido.co.jp/gb/ibuki/

色使いといい、写真の使い方といいとてもインパクトのあるサイトです。
これまでの化粧品関連のサイトとはアプローチの仕方がかけ離れていてとてもおもしろいです。



【すべてがFになる】
TVアニメ「すべてがFになる THE PERFECT INSIDER」
URL : http://www.f-noitamina.com/

”すべてがFになる”というアニメのサイトです。
はじめから、ユーザーがなにもせずとも動き出すのでびっくりします。
クリックすればするほど、楽しいサイトです。



【takeit】
Take it   Free Polaroid prints from your iPhone.
URL : http://www.takeitapp.co/en

下からでたり、くるっと回転して表示したりとにかく「そのアイコンがこうなるの!?」とWEBデザイナーの私でも驚きのサイトです。
良く触って楽しんでみてください。





おもしろい動きのサイトはたくさんありますね。
ただ、動きにこだわって複雑になれば複雑になるほど、ユーザーの予測していない結果になってしまいます。操作性の悪い自己満足のサイトにならないように注意はしなければなりませんね。

しっかり見せるところは見せて、読ませるところは読ませるといったユーザービリティを考えた上で、
何度も訪れてしまうような面白い動きのサイトを今後も創っていきます。

test
2015年9月15日

素敵!自分のPCに入っているフォントを一覧表示できるWEBサービス

こんにちは、DESIGN OFFICE TIGHTのWEBデザイナーANAです!

今日は、すごく素敵!自分のPCに入っているフォントを一覧表示できるWEBサービスをご紹介します。

WEBデザイナーだけでなく、フォントを使用するお仕事の人はわかっているはずです。
フォントの重要性を・・・

フォントもデザインの一部であり、フォントが変わるだけで、デザインのイメージがガラッと変わってしまったりします。
こだわる方や、ポスターなどを仕事としているかたはご自分で文字を創られることも多いのではないでしょうか?

それでも、もともとPCの中に入っているフォントを使用したい場合、一つ一つを並べてどのフォントが今作成中のデザインに合うのか見極めるのは大変です。

そこでご紹介したいのが、私が一番お世話になっているサイト。
『Wordmark』です。

とにかくシンプルで使いやすい!
さらに表示も綺麗で、もちろん日本語にも対応しています。

知っている人も多いんではないでしょうか?

09151

上の画像の”Wordmark”に表示したいテキストを入力すれば表示されます。

リンクを貼っておくので、ぜひ利用してみてくださいね。
デザインの作業が捗ること間違いなしですよ!

【Wordmarkサイト】http://wordmark.it/

それではまた~。

ANA(*´ω`)




beachy-head
2015年9月4日

【CSS3】素敵な演出!ぼかしを使用したWEBデザイン

こんにちは、ANAIです。

9月に入り、季節も徐々に秋へと色めいてきましたね♪
ANAIは秋物のお洋服が欲しくてたまりません。


今日は、CSS3で簡単にぼかし効果を行う方法を書いていきます。
背景を少しぼかすだけでサイトのイメージが全然違いますよね(*´ω`)


「CSS3って、まだよくわからない!」って方も、filterプロパティを利用すると、
ぼかしの効果を難しい記述をすることなく簡単に実装することができます。

では、実践していきましょう。
WEBデザイナーの卵さんなら、やりながら覚えるのも楽しいですよ!

もし、これからホームページをつくろうと思っている方が見られているならば、
これからつくる理想のサイトに素敵なぼかし効果を使ってみてください♪

●CSS3のfilterでblur効果を実装
filter
filter2

-webkit-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);


はい、これだけです(笑)
これをスタイルシートに記述するだけで簡単に指定した画像や背景がぼけてくれます。

すばらしいですね~( *´`)

問題点はwebkitブラウザしか対応していないことです・・・。
ベンダープレフィックスで-webkit-をつけても動きます。
つけなくても動きますが。

webkitブラウザしか対応していないのは結構致命的・・・。
使うのもすこし注意が必要ですが、簡単にひと手間加えるだけで素敵な演出ができるのはうれしいですよね♪

スマホ向けであれば大丈夫なのでもしスマートフォンサイトをつくろうとお考えの方は試してみてください♪

下にデモページをつくっているので、見てみてくださいね。
ちなみにブラウザがIEの方は、GooglechromeかFIrefoxでご覧ください。

btn



それではANAIでした~(*’▽’)ノ

blog02
2015年6月29日

今話題の”chappie(チャッピー)”で遊んでみた♪

こんにちは、WEBデザイナーのANAIです!

今日は、今話題のスマホアプリ”chappie(チャッピー)”で遊んでみました。

みなさん、”chappie(チャッピー)”をご存知ですか?

”chappie(チャッピー)”は1994年にデザインスタジオgroovisions(グルーヴィジョンズ)が製作した、人型のグラフィックデザイン/システムです。

チャッピーには、直立で正面を向き、顔のパーツ等を一定にするなどの基本的なルールが設定されていますが、特定の年齢や性別、国籍は設定されていません。

そのため、髪型や服装、肌や目の色を変えることで、チャッピーは世界中の誰にでもなることができます。パソコンの中で生まれたチャッピーは、1997年にはマネキン型が作られ、その後1999年には、ソニーミュージック・エンタテインメントより歌手としてCDデビューを果たし、シングル3枚、アルバム1枚を発表しました。

現在でも、企業や学校のイメージキャラクターを務めたりと様々な分野で活動しています。


・・・とこんな感じで公式のサイトにには説明が書いてありまする。
http://groovisions.com/chappie/

まぁ何はともあれ、スマホに落として使ってみよう!というところ♪

いざ実践~!!

誰をつくろうかな~♪
今回は我が社には欠かせない存在、ETO統括マネージャーを作成いたします~♡

まずは~背景をえらんで・・・
ETOマネージャーのイメージカラーは””なので背景を選択!

15473
と、まぁこんな感じで、
・肌の色
・目の色
・洋服
などを選んでいきます。


そして一番重要なのが~髪型!


既存の髪型から似ているものを選びます♪
なかなか似ているものがないぞ・・・むむむ!

まぁそんなピッタンコカンカンなものはないので、ある程度妥協して似ている髪型を選択・・・。

15472

男性だった場合はひげが選べます。
また、眼鏡をかけている方の場合も眼鏡が選択できます。

こうやって小さなアイテムを足して、個性を出していくんですね~。


はい、出来上がりました~♡かわいい~♡
ETOマネージャーの完成です。


15471

これできあがったものを、SNSや、アドレス帳のプロフィール画像にしてアピールできます。
友達の顔をつくって、友達に送ったりもできますよ♪

ch01

みなさんもぜひ遊んでみてくださいね~!