2017年1月1日

あけましておめでとうございます。

旧年中は格別のご厚情を賜り、誠にありがとうございました。
皆様のお陰で無事に新しい年を迎えることができました。


私たち社員一同、「お客様に喜んで頂けるホームページをつくる」という基本に立ちかえって、地道に、ひとつずつ、目の前のできることから取り組んで参りたいと存じます。

本年も変わらぬお引き立ての程よろしくお願い申し上げます。
皆様のご健勝とご発展をお祈り申し上げます。

201601-2

デザインオフィスTIGHT(タイト) 社員一同

release%e3%81%ab%e5%8b%95%e7%94%bb%e6%8a%95%e7%a8%bf-fw
2016年10月25日

自分で撮影したオリジナルの動画をRELEASEに投稿する方法

皆さんこんにちは。

 

さて、当社サービスのRELEASEですが、youtubeを通して動画を投稿することができるのです。

ご存知でした?

 

今回は、「自分で撮影したオリジナルの動画を投稿する方法」をお伝えします。

去る10月15日に開催された福岡県福岡市東区の花火大会を投稿しようと思います。

 

ちなみにこの花火大会、9月に開催予定だったのですが台風でお流れに。

でも、花火大会運営の皆様が頑張って、10月15日に延期の形で開催にこぎつけたものなんです。

頭が下がる思いです。すごい!

それでは、手順を紹介いたします。

 

アイフォンからユーチューブ、そしてリリースに投稿する

 

必要なアプリ

・写真(アイフォンに初期で入っています。)

・YouTube(ダウンロードが必要です。)

必要な情報

youtubeのログインIDとパスワード(Gmailといった、グーグルのサービスで作ったアカウント情報で入ることができます。)

 

1.まず、YouTubeに動画をアップロード

 

さて、撮影した動画は私のアイフォン7の中に入っています。

その動画はアイフォンの「写真」から確認することができます。

tight1001

写真 > ビデオ > 投稿する動画を選択。

ではここで右下にある□に↑の重なったマークを押します。

このマーク、共有のアイコンです。

tight1002

そしてここに出てくるyoutubeのマークを押します。

tight1003

ここで、youtubeにログインしていないときは、ログイン画面が表示されます。

tight1004

ログインしたら、動画の情報を入力する画面が出てきました。

情報を入力していきましょう。

情報を入力し終えたら右上にある「公開」を押しましょう。

tight1005

公開している状況が、画面の下に表示されます。

tight1007

動画が公開されました!

さっそくyoutubeで見てみましょう。

tight1007

おっと、エラー?

大丈夫。これは公開された後も、動画の後処理をyoutubeがしているのです。

もうちょっとだけ待つと、、、

tight1008

無事公開されました。

さて、ここからRELEASEに投稿しましょう!

 

 

2.RELEASEに投稿

RELEASEでは、投稿の際youtubeのアドレスを張ることで、動画として紹介することができます。

でもアイフォンのアプリのどこからアドレスをどこからコピー?

その手順を紹介します。

tight1009

これの・・・動画を一回タップすると表示される、ここです。

このクルン、とした矢印をタップして、

tight1010

リンクボタンを押すとアドレスがコピーされます。

そして、インターネットを見ることができるブラウザで、いつものRELEASEから、

http://release.co.jp/pins-settings/

tight1011

「ウェブから画像をアップロード」を押しっぱなしに。

レンズが出たら指を離します。

すると、「ペースト」が表示されます。

この「ペースト」をタップしましょう。

「画像取得」をタップして、

tight1012

投稿する動画のサムネール画像をタップ。そして、

tight1013

投稿画面がでてきます。

思い思いの言葉を入力して、投稿ボタンでフィニッシュです。

http://release.co.jp/r/257940/

tight1014

今回はRELEASEに動画を投稿する方法を紹介しました。

 

youtubeにアップされている動画であれば、RELEASEに紹介することができます。

 

今回は個人的な動画を紹介しましたが、皆さんの会社のサービスを動画で紹介したい!という

方は、youtubeに投稿されたアドレスを入れるだけで、RELEASEに紹介することができます。


ぜひ、動画でも投稿してみて下さい。

%e3%83%97%e3%83%ac%e3%82%b8%e3%83%87%e3%83%b3%e3%83%88%e3%83%90%e3%83%b3%e3%82%af-%e3%82%bf%e3%82%a4%e3%83%88%e7%94%a8
2016年10月12日

中小企業の経営者様必見!「PRESIDENT BANK =プレジデント バンク=」

みなさんこんにちは。Web制作チームの松林です。

さて、株式会社スマイルホールディングスでは、新しいサービス「PRESIDENT BANK =プレジデント バンク= 日本を支える中小企業の経営者たち…」を立ち上げました。

http://presidentbank.jp/


プレジデントバンク お申込ページはこちらから。
http://presidentbank.jp/lp/

このサービスは、個人、中小企業の経営者の皆様にスポットを当てたものです。
そして会社の発展とPRのツールとして大変役に立つものになっています。
今回はその全体的な概要をお伝えします。


プレジデントバンクの3つの特徴

1.自社への売り込みができる 他社へのコンタクトがとれる

1.自社への売り込みができる 他社へのコンタクトがとれる

会社にとって事業のPRは必須です。
お客様に対して、自社がどのような事業をしているかPRするページを準備しています。
ただ、通常のホームページと違うのは、経営者の方にスポットを当てているということ。

プロフィールや企業の理念、目標があり、信念をもっていることをPR。
ただ商売をしているだけではない、気持ちを伝えることで興味を持っていただこうという趣向です。

そしてビジネスマッチング。
PRページから気持ちが伝わった企業からのコンタクトをぜひ獲得していただきたいと
思います。

2.採用情報掲載で 人材を呼び込む

2.採用情報掲載で 人材を呼び込む



 

前述のPRを見るのはお客様、将来のお取引企業だけではありません。
就職、求職、転職をしようと考えている方にとっても、重要な情報です。
ハローワークや、民間の求人サイト等と違うのは、経営者がみえるということ。
自分にあった企業探しには最も重要な情報の一つです。

働く環境や条件のほかに、経営者がどのような方なのか。
それは、これから就職しようと思う人たちにとって重要な情報のひとつとなります。

3.これらの情報をGoogleやYahooに検索されやすいポータルサイト

3.これらの情報をGoogleやYahooに検索されやすいポータルサイト

 

当然のことですが、いわゆるこのサイトの「SEO」です。
まず、大手検索サイトにすぐ登録されます。

プレジデントバンクはこれまで培ったSEO対策をしています。
そしてさらに幅広く情報を広げます。SNSです。

フェイスブック、ツイッター、グーグル+をはじめとして、
マイナーといわれるタンブラー、ピンタレスト、当社が運営しているリリースにも紹介。
幅広い情報拡散を進めています。

 

これから。

 

今回、私はプレジデントバンクの開発担当として携わってまいりました。

最近ではIT産業の発達で、様々な分野で多様化が進んでいます。
その多様化に対応できるのは規模が小さく、かつフットワークのよい
個人企業、中小企業です。

昔から個人企業、中小企業は日本を、いや世界を支える大きな存在です。
そのお手伝いをこれからもしていきたい。
その思いを胸にプレジデントバンクの「改良」はこれからも続きます。

ぜひお申込みください。

プレジデントバンク お申込ページはこちらから。
http://presidentbank.jp/lp/

タイト用求人イメージ
2016年6月28日

求人 未経験可 WEBデザイナー・HTMLコーダー募集

みなさんこんにちは。Web制作チームの部長、普段はこっぱずかしくてブログ上ではmatで書いている松林です。

 

今回、デザインオフィスタイトを運営している株式会社スマイルホールディングスでは、私たちのチームの一員となってくれるWEBデザイナー・HTMLコーダーを募集します。

http://release.co.jp/r/211994/

http://smile-hd.jp/recruit/

|Д゚)<あ、すみません。営業職も募集中です。

 

ここでは「デザインオフィスタイト」の一員として働いてくれるクリエイティブ職についてお話します。

せいさく

1.そもそもタイトはどんなところ?

デザインオフィスタイトは、ウェブサイトの制作をしています。

制作実績  http://smile-design.bz/tight2/working/

そのデザインの傾向はここ数年変化しており、時代に合った、挑戦的なものを制作しています。

その制作物のほとんどはワードプレスによる案件です。

「ウェブサイトは管理できて、アピールを続けてモノになる」その当然のことが簡単にできるように。ですので、「デザインオフィスタイト」の一員になるということは、「まずワードプレスができなきゃいけない」ということでもあります。

 

2.必要な技術(スキル)は?

「デザインオフィスタイト」の一員になるために求められるスキルはHTML、スタイルシート、そしてデザインです。

WEBデザインを考える際にはHTML、スタイルシートの知識があるないで相当変化します。

良いデザインを生み出すためにもこの3つは欠かせません。そして「タイト」は少数チームで形成されていますので、必要に応じてコーダーをしてもらいます。

 

( ・ㅂ・)ノ<あ、入った後にはPHPとかJavaScriptとかJqueryとか
      データベースのこととかいろいろ覚えてほしいよ。

 

3.こんな人に来てほしいよ。

多少スキルが低くても、成長したい!成長願望が高い、そんな人はバッチリOKです。

どの業種でもそうですが、WEB業界でいえば、制作方法や使用する技術、デザインの動向の変化が激しい業界です。

一通りの技術を覚えてもなお、業界の変化についていく必要があります。そのためには自分でその変化を感じ取り、新しい技術が出たらそれらを実践する。そんな人をお待ちしてます。

 

ほかにもなんか書いてるデザインオフィスタイトのフェイスブックページはこちら

https://www.facebook.com/smiledesignoffice/

ツイッターはこっち。

https://twitter.com/SDO3016

応募、お問合せはこちら。

http://smile-hd.jp/contact/

 

 

 

 

お客様の声
2016年5月2日

ホームページを制作させて頂いたお客様の声 vol.3

デザインオフィス TIGHTで制作させて頂いた、

「小野建設有限会社」様のホームページが2016年4月20日に公開となりました。

 

img1

 

小野建設有限会社様 ホームページ

 

小野建設様は筑紫野市に本社を構える建築会社です。

新築、リフォームから解体工事まで、大きな事業から個人の仕事、人が敬遠しがちな仕事でも、お客様が望むすべてに対応できるすばらしい会社です。

幅広くいろんなことができるので、制作実績も多種多様となっています。

制作実績もおおきく二つにわけて、お客様が見やすいサイト創りを心がけました。

 

小野建設様

 

 

 

また、平成19年度より筑紫野市商工会が立ち上げた「紫プロジェクト」にも参加し、紫芋の低農薬栽培と紫芋を使用したお菓子の販売を行っています。

 

新着情報にこれまでの活動を書いてあるので興味のある方はぜひ読んでみて下さい。

【URL】小野建設有限会社 新着情報

 

 

お客様の声と反響

 

お忙しい中、写真や文章など、小野建設様にはたくさんのご協力をいただきました。

こちら側からの要望も多かったにも関わらず、快く対応していただき、サイトを作り始めてから公開までとてもスムーズに行うことができました。

人に寄り添い、お客様のことを第一に想う、アットホームな雰囲気の小野建設様のことをサイトを通してしっかり伝えたい!という気持ちを胸にサイトを作成し、その想いが伝わったのかお客様には満足度96%というすばらしい評価をいただきました。

 

アンケートを実施した時のお客様の実際の声を公開いたします。
(お客様に了承を得ています。)

アンケート8

 

 

 

小野建設様も筑紫野市で一番良いサイトだという声を、お客様からいただいたそうで、私たち社員一同もとてもうれしいです!

 

筑紫野市で新築やリフォーム、土入れ、外壁等の外回り工事、解体、整理処分などご検討中のお客様はぜひ小野建設様にお問い合わせください。

【お問い合わせ】http://onokensetu.com/contact/

これからも、小野建設様の益々のご発展をお祈りしております。

 

小野建設有限会社様
〒818-0003
福岡県筑紫野市山家3721
TEL:092-926-1831

 

【小野建設有限会社様ホームページ】http://onokensetu.com/

 

 

TIGHTブログWORKS紹介
2016年4月30日

ホームページを制作させて頂いたお客様の声 vol.2

株式会社牛島製茶様の、楽天市場ホームページでの

母の日ギフト特集ページをデザインオフィスTIGHTで制作させて頂きました。

牛島製茶 母の日ギフト特集

株式会社牛島製茶様 楽天市場サイト

牛島製茶様はお茶どころとして有名な福岡県八女市にて、

大正10年からお茶づくりをされている老舗の八女茶専門の会社です。

自家茶園での栽培、自家工場での製造、自家販売にこだわり、全ての工程を自社で行われています。

 

今回、新茶の時期ということで、新茶と八女玉露スイーツがセットになった、

母の日ギフトの特集ページを作成させて頂きました。



牛島製茶 母の日ギフト 201602

昔から、八十八夜(5月2日頃)に摘んだ新茶を飲むと、元気に長生きできると言われており

母の日や父の日などの贈り物として、大変喜ばれています。

また、八女玉露を贅沢に使用したバームクーヘンやラスクなどの和のスイーツは、

上品な甘さで八十八夜摘み新茶とも相性ぴったり。

こちらの母の日ギフトは豪華な重箱入りで、

牛島製茶の社員の方が心を込めて風呂敷で一つ一つ包まれています。

メッセージカードも無料でサービスされていて、オリジナルのメッセージ内容も

社員の方が手書きで対応して頂けますので、

母の日はもちろん、父の日や誕生日の贈り物にも幅広くご利用頂けます。

大切な人への贈り物にぜひどうぞ!

 

株式会社牛島製茶
住所:〒834-0024 福岡県八女市津江397
0943-22-4818

http://www.yame.co.jp/index.html

gwyasumi
2016年4月28日

ゴールデンウィーク期間中のお休みについて

いつも大変お世話になっております。
デザインオフィスTIGHT(タイト)です。

誠に勝手ではございますが、ゴールデンウィーク休業を
下記日程において取らせていただきます。

【休暇日程】
5月1日(日)〜5月5日(木)まで

尚、ゴールデンウィーク休業中は、
メールやお電話等でのお問い合わせに対する
ご返答が遅れる場合がございますので
予めご了承ください。

以上、ご繁忙の折、
大変ご迷惑をおかけいたしますが、
何卒、ご理解ご協力の程、
よろしくお願い申し上げます。

デザインオフィスTIGHT(タイト) 社員一同

ブログ画像
2016年4月3日

ホームページを制作させて頂いたお客様の声 vol.1

デザインオフィス TIGHTで制作させて頂いた、

「有限会社 HOME PLUS(ホームプラス)」様のホームページが2016年3月18日に公開となりました!

 

ホームプラス様サイト1

有限会社ホームプラス様 ホームページ

 

ホームプラス様は福岡市早良区に本社を構える建築会社で、

リフォームやインテリア・内装、増改築などを専門に、

福岡を始め、九州を中心に多くの案件を手掛けていらっしゃいます。

 

元々ホームページをお持ちでしたが、事業の拡大とさらなるインターネットからの広告・集客を目指して、

今回、TIGHTでホームページのリニューアルを担当させて頂きました。

 

ホームプラス様 サイト
ホームプラス様 サイト3

 

サイトのトップページには「あ、いいねをプラスする」という企業コピーを印象付けるオープニングのアニメーションを設置!

取り扱いされている事業を項目別に紹介するページを追加し、リフォームの施工実績はビフォー・アフター形式で一目見てわかりやすいようにしました。

 

お客様の声と反響

 

今回、公開前の数ヶ月は、建築業界でも忙しい時期だったにもかかわらず、

何度もお話しをお伺いしたり、写真をご提供頂いたりと快くご協力頂きました。

そういった、社長を始めとしたホームプラス様のお人柄が伝わるようなサイトにしたい!
そんな気持ちで社員一同制作させて頂きました。
納品したホームページはホームプラス様にも大変お喜び頂き、
お取引のある会社様にもホームページを見せて頂いたりと、早速ご活用頂いているそうです。

また、リニューアルオープン後に早速ホームページからのお問い合わせもあったとの報告を頂き、

TIGHT社員も大変うれしく感じています(●´v`●)

 

九州にお住まいの方でリフォームや内装工事をご検討されているお客様は、

ぜひホームプラス様へ公式サイトからお問い合わせ下さい♪

お見積りや不明・不安な点のご相談にももちろん、とても親切にご回答頂けますよ!

 

*お問い合わせはこちら*

 

これからも、ホームプラス様の益々のご発展をお祈り申し上げます!

 

有限会社ホームプラス
住所:福岡県福岡市早良区小田部1丁目24-4-2
TEL:0120-406-013

http://f-homeplus.com/

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でした(*’▽’)
googleDrive
2016年2月26日

私がOfficeよりGoogleDriveを選ぶ理由

みなさんこんにちは。仕事、はかどってます?

今回は日ごろ使っているであろう表計算やドキュメント、プレゼン資料作りのためのサービスをご紹介します。

もうすでにご存じの方も多いであろう、あのGoogleDriveです。

もうかれこれ20年近く、仕事効率を図るための表計算ソフトといえばエクセル、ドキュメントはワード、そしてプレゼン資料作りにはパワーポイントが主流でした。

今でもこれらのソフトを使いこなす猛者がたくさんいらっしゃるでしょう。

かという私も、某検定でExcel2級、Word2級というものを必要に迫られて取った経験があります。

PHP取得後だったのでエクセルはちょっとしたプログラム感覚で関数を覚え、ワードは「多少間違えてもいいからとにかく見た目通り完成させればOKな検定だなこりゃ」と、キーボードバシバシたたきながら、なんとかとった覚えがあります。

 

今ではそんな知識も半分以上忘れながらも、それらの知識をgoogleDriveで生かしてます。

 

あれ?

 

さて、検定まで取ったなぜ私がgoogleDriveを選んだのか、そしてどのようにして活用しているのかをここでお伝えしたいと思います。

 

GoogleDriveにした理由1:無料(ただし課金サービスあり)

 

一応、課金で保存容量が増えるというサービスがありますが、基本は無料。しかも、課金の有り無しに関係なく機能的な制限は全くといっていいほどありません。

(今後、多少変わる可能性はあるかもしれませんが。)

しかも容量制限は15Gと、文書を作るだけだったら、いったいどれだけの時間を費やせばいいかわからないほどの書類数が保存できます。

 

ちなみにこの容量制限、グーグルのフリーメールであるGmail、画像の保存や整理ができるGooglePhotoでも使用されます。ただ、それでも2年ほど使っている私でさえ1G超えるかどうか。

尋常じゃないほどのヘビーユーザーでない限りは足す必要もないかも。

 

でも、安かろう悪かろうじゃ?と思っている方もいるでしょう。

 

GoogleDriveにした理由3:officeと特別変わらない機能

 

GoogleDriveにはいくつかのファイル形式を扱うことができます。

 

文章ファイル形式の「goolgeドキュメント」

Document

表形式ファイルの「goolgeスプレッドシート」

スプレッドシート

プレゼンテーションを作るのに便利な「goolgeスライド」

スライド

ぶっちゃけると

 

「goolgeドキュメント」>ワード

「goolgeスプレッドシート」>エクセル

「goolgeスライド」>パワーポイント

ですね。

 

ああ、申し訳ないけどこれだけでも十分。

この3種類を主に、他にも様々な形式でファイルを作ることができます。

google以外の会社が独自の形式のファイルを作れるようにと、googledocumentのアプリとして、様々なサービスを提供しています。

 

それらの様々なサービスは、また気が向いた時にでも紹介するかな。

 

GoogleDriveにした理由3:クラウドだから進化が早い

 

さて、そんなGoogleDriveも、やはりオフィスにはかなわないところがありました。

 

「officeではできたのにGoogleDriveではできない!」

「GoogleDriveもまだまだだな。」

 

たしかにサービス開始時はとてもじゃないけど使いにくい。そんな印象でした。

ところが、どうも日がたつにつれどんどん使いやすくなっている。

officeでないとできなかかった機能が付きだし、今では遜色のない使い心地に。

 

これは、いわゆるクラウドサービスだからできる、リアルタイムな機能追加。

 

これによって、GoogleDriveの使い心地はどんどん良くなってきているのです。

 

GoogleDriveにした理由4:複数ユーザーによる同時編集ができる!

googleDrive2

さて、これまではofficeにできてGoogledocumentにはできなかった、それに追いついてきたということをお伝えしましたが、次はGoogledocumentの一番の魅力、複数ユーザーによる同時編集についてです。

 

これ、今回の記事の一番大事なところ。

 

GoogleDriveにはファイルを共有したいユーザーにファイルを公開、さらには編集させることができるのです。

しかも、ただ編集するだけではなく、複数のユーザーによって同時に編集ができる!

 

これを使えば、一つの書類をみんなで同時に作ることができるのです。

 

「このファイルのココのところは〇〇さんの得意分野だから作ってー!」

「この情報自信ないから書き直してー」

 

と言ったことが、「今保存して閉じといたよー」という会話なしに即座に編集できるのです。

 

officeでも最近そういったことができるようになっているようですが、やはりこの便利な機能を早くに作り出したのはすごい!

 

この機能を活用すれば、社内の書類を作るのもかなりの時間短縮にもなります。

 

「今度の週報会議、自分が担当しているところを更新しといてー」

 

この使い方をすれば、誰かが作業を終わらせるまで待たなくてもOK。

当社でもこれを使って日報を全員に書かせています。

今日やった作業一覧を同じファイルに書く。

それぞれがメールで報告するより断然早くなります。

具体的にはこのような感じ。

googleDrive3

これで途中に入っている、メールを編集する作業が格段に速くなるわけです。

 

仕事効率化にはもうすでに手放すことができない存在となったGoogleDrive。

officeとの違いはせいぜいボタンの位置だけのような感じになりました。

それぞれの使い方についてもまた、追って書いていくかもしれませんが、今日はこの辺で。

-9
2016年2月20日

Welcartを使ってLPにカートボタンを設置しよう!

 

 

こんにちは!

WEBデザイナーのWATANABEです!

最近のお仕事で、ワードプレスでランディングページを作成し、「購入する」ボタンを設置、

クリックするとカートに商品が入って注文ができるようにしたいとの依頼をいただきました。

 

そんな時に便利なワードプレスのプラグイン!

ブログ記事や固定ページにさくっとカートボタンを設置できる、

「Welcart(ウェルカート)」を使ってみました!

 

 

 

Welcartって何?

 

 

Welcart(ウェルカート)とは、Wordpressで簡単にネットショップを始められる便利なプラグインです。

 

名-7

 

無料のECサイトテンプレートも充実していて、そのまま使うだけで、

カッコいい通販サイトが速攻で出来ちゃいます!

 

導入方法も超かんたん。

 

プラグインから「Welcart」で検索し、インストールするとダッシュボードに下図のような

ECサイト系のメニューが表示されるようになります。

 

名称未-7

あとは、メニューに従って商品登録や配送の設定、決済方法などをどんどん設定していくだけ!楽天やyahoo!などを使わなくても、Wordpressで簡単に通販サイトを立ち上げることができます!スバラシー!

 

 

 

 

 

固定ページへカートボタンを設置するときは、ショートコードを使おう!

 

 

ECサイトを作る場合は、Welcartで配布されているテンプレートを使うと早いのですが、

今回はランディングページとなる固定ページに、カートボタンを設置します。

 

 

まずは、ダッシュボードの「新商品追加」から商品を登録~。

 

 

次に、ランディングページのhtmlを書き込んだ固定ペ―ジにカートボタンを設置したいわけですが、

welcartの公式で公表されている「カート投入ボタン」のテンプレートタグ、

 

 

usces_the_itemSkuButton($value)

 

 

これをそのまま固定ページ内に書き込んでも、カートボタンはちゃんと作動しません!

このタグは、登録した商品ページ(投稿ページ)に記述されることで、商品と関連付けされてるので

固定ページに書き込んでも、どの商品をカートに入れるのか判明できないのです!

 

なので、固定ページにカートボタンを設置するときは、こっちのショートコードを書きましょう!

 

 

[button_to_cart item="item_code" sku="sku_code" value="text"]

 

item_code : 商品コード
sku_code : SKUコード
value : ボタンに表示するテキスト( 購入する、カートに入れる 等)

 

 

商品コードとSKUコードは、商品登録の際に自分で設定するやつです!

 

 

これで無事、固定ページにカートボタンが表示され、カートに商品を入れる事ができます!

あとはCSSで自分の好きなデザインにボタンを装飾しましょう~!

 

 

 

 

ウェルカートを使えば、ECサイトを持たないお客様でも、Wordpressでランディングページを作成し、

WEB上で商品販売から申込決済システムまで簡単に導入することができますね!

 

気になった方はお気軽にお問い合せ下さい(*´∀`)

 

 

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でした~(^^)/

blog2
2016年2月5日

とあるギャラリープラグインの修復記録 「Gallery by BestWebSoft」

数年前に作ったwordpress仕様のウェブサイトで、プラグインの調子が悪かったのでその解決を図りました。
そのプラグインの名は「Gallery by BestWebSoft」。

当時、クライアントの要望を聞いて、いろいろ探した結果見つかったギャラリー系のプラグインです。
使い方はそこまで難しくなく、アップロードした画像や、その場でアップロードした画像にtitleとAltとリンクを設定できるといった非常にシンプルなもの。
その表示法もシンプルです。


あれから2年、wordpressとプラグインがともにバージョンアップし、どうやらその過程でいくつかの問題が発生したようでした。
そのバグらしきものは、「画像の削除ができない。」
一見、管理画面では削除したように見えるのですが、どうも編集後のページからは削除されていない。
いったい何が起きたのか。

早速調査です。

https://wordpress.org/support/topic/error-when-trying-to-delete-images

02



|д゚)…
|д゚)読めん!



困ったときのgoogle翻訳。


01

こうして、


https://translate.google.co.jp/translate?sl=en&tl=ja&js=y&prev=_t&hl=ja&ie=UTF-8&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ferror-when-trying-to-delete-images&edit-text=&act=url

03
よっしゃよっしゃ。


「イメージを削除しようとしたとき、私はエラーを取得しています。 私は、ギャラリーを作成した画像をアップロードし、ギャラリーを公開しました。 私は、画像を削除し、「更新」ボタンをクリックすると、私は次のエラーメッセージが表示されました」


「こんにちは、我々は、この問題を修正しました。 最新バージョンへのプラグインを更新してください。敬具、 支援チーム」


つまり、最新バージョンでは解決していると。
では、さっそく最新バージョンを入れます。


できました!

04


|д゚)…まっしろです。


おかしい。そういえば、ウチのコーダーが「できなかった」っていってたな。
そう、そんな問題がでたから私のところにこの話が来たのでした。


えーっと。
https://wordpress.org/support/topic/plugin-gallery-doesnt-work
https://translate.google.co.jp/translate?hl=ja&sl=en&tl=ja&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fplugin-gallery-doesnt-work
05
「私はこれをインストールしていると私は、ギャラリーページを作成し、それを表示すると、それは非常に奇妙な…のホームページと混合ギャラリーを示しています。
申し訳ありませんが、これは私のために動作しません。」


「最後のプラグインのバージョンでは、別の1にprettyphotoライブラリを変更することが駆り立てました。 フォルダをプラグインからファイルをテーマにギャラリーテンプレートファイルを交換してください。 これらのファイルは、「ギャラリー単template.php ‘と’ギャラリー-template.php」であり、それらは「ギャラリー・プラグイン/テンプレート」フォルダに配置されています。よろしく、オクサナ」


つまり、ダウンロードしたプラグインの中にテンプレートが入ってるよ。これ使ってね、ってことでした。


さっそくご指定のフォルダ、「gallery-plugin/template」の中を見てみると、ほうほう。
「gallery-single-template.php」と「gallery-template.php」が入っている。

この二つのファイルをテーマに入れ、ソースを調整。

06

無事表示されました。

そして、当初の問題であった削除しても消えない問題も解決しました。
めでたしめでたし。


ところでこの「Gallery by BestWebSoft」。有料版でまた便利な機能もあるようですが、今回は無料版で十分。
管理画面も英語のままですが、直感でわかる上にクライアントも使い慣れているようで、特に問題ありません。

07

ほいほいっと画像をアップして、小さめに表示する分にはなんの問題もありません。
いろんな画像をそろえて並べたい!ってときに便利ですよ。

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でした~!