高速化
2018年11月13日

ウェブサイト高速表示のための画像の軽量化・最適化

ウェブサイト運営にあたってスピードを気にするようになったのは、それがGoogleのSEOにつながるからという理由があります。あまりに遅いサイトはGoogle上位には行かない。そのような状況を打開するためにウェブサイトのスピードをどのように解決するか。その代表的な方法がPageSpeed Insights でspeedチェックをするということです。

ウェブサイトは開いても、その開くまでの時間が問題です。2000年前後ならともかく、今の時代ウェブサイトが開くまで数秒かかるだけでもユーザーは遅いと感じ、3秒以上かかると見ずに閉じるユーザーが現れ始めるといわれています。

できるだけ早くウェブサイトを開く、そのために、ここではまず画像の最適化についてお伝えします。

画像を最適化する理由

画像を最適化する理由は、そのデータ量をできるだけ軽くすることにあります。

ブロードバンドの時代が来てかなり立ちますが、現在は画像一枚の重さぐらいどうってことはありません。しかしその枚数が何十枚もあるとさすがに重くなり、ウェブサイトが開くのが遅くなってしまいます。

画像を軽くする

a 画像枚数が少ない場合

画像枚数がそこまで多くない場合、ウェブサービスで画像を軽くすることができます。いまではすっかり有名な「Tiny png」です。

tiny

https://tinypng.com/

Tiny pngは一度に20枚、重さ5Mbまでのファイルを圧縮することができます。

簡単なウェブサイトであれば、そこまでの枚数もないので気軽に圧縮できますね。

 

b 画像枚数が極度に多い、または5Mbを超えている場合

ウェブサイトによっては、画像が1万枚をこえるとか、やけに大きな画像がある場合があるでしょう。おおきな画像は「Tiny png」で圧縮することができなかったり、何百回も利用しなければいけなかったり。

そこで利用したいのがフリーソフト「voralent antelope」。
パソコンの仕様に応じてけっこうな枚数を一度の操作で圧縮できます。800枚前後はいけるでしょうか。

vore

https://www.vector.co.jp/magazine/softnews/140902/n1409021.html

c サーバー側で解決を図る

すでにサーバー上にある、数えられないほどの画像がある場合。もしかしたらserver会社の設定で何とかなるかもしれません。

たとえばエックスサーバーの場合、「mod_pagespeed」という設定があります。これを利用することで早くなる場合があります。

 

1分、一秒でも早くウェブサイトを表示させるために頑張っていきましょう。

2018年9月6日

【北海道地震のお見舞い】

9月6日午前3時ごろに北海道地方を震源とする地震により被災されたみなさまに謹んでお見舞い申し上げます。

被害に遭われた方々への救出、救援が一刻も早く行われ、復旧作業に従事されている皆様のご安全と被災地の一日も早い復旧を心よりお祈り申し上げます。

デザインオフィスタイト スタッフ一同

2018年9月6日

【台風21号による災害のお見舞い】

このたび台風21号の影響により被災されたみなさまに謹んでお見舞い申し上げます。

みなさまの安全と、一日も早い復旧を心よりお祈り申し上げます。

デザインオフィスタイト スタッフ一同

求人画像
2018年1月12日

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

( ・ㅂ・)ノ<皆さんこんにちは。デザインオフィス タイトの松林でございます。

今回、デザインオフィスを運営している株式会社スマイルホールディングスでは、私たちのチームに入ってくださるWEBデザイナー、HTMLコーダーを募集しております。

 

 

1.DESIGN OFFICE TIGHTとは?

 

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

 

次から次にやってくるITの変化に立ち向かう

 

数年前、デザインの傾向はすっかりレスポンシブに。そしてさらに「スマホで見ることができないサイトは問題外」となりました。さらには映像やアニメーションを生かしたものへと変化。アニメーションも、フラッシュからJqueryやスタイルシートに移行しました。

 

これらの技術を習得、チャレンジしてきたのですが、IT業界はどんどん変化しています。

 

TIGHTに来て下さる方には、ぜひ、この変化を楽しんで受け止める方に来ていただきたいと願います。

 

クライアントが発信する情報も、次々と変化が必要となっています。

時代の流れに沿った情報の更新は当然のものとなり、それはCMSを利用することですぐ反映されるようになってきました。

DESIGN OFFICE TIGHTでは、これをワードプレスで実現しています。

 

2.必要なスキルについて

 

当社が求める人材は下記のパターン。

 

1.デザイン
2.HTMLとCSS
3.PHPやJquery

 

未経験者の場合、これらのどれか一つ。経験者の場合はどれか二つかそれ以上を求めています。

少数人数による会社ですので、必要に応じて様々な仕事を振ります。わからない場合はどんどん聞いて、実力を上げていってほしいと考えています。

 

職業訓練校を出たばかり?

 

これまでTIGHTでは、職業訓練校を出たばかりの方が活躍をしております。

足らない技術やデザインは、入社後にフォロー。人によってかかった時間は違いますが、最終的に一つの仕事を任せております。

 

異業種からの転職は?

 

デザインやプログラムにかかわる職種についていた方を歓迎しております。

これまでデザインの仕事に携わってきたけど、HTMLやCSSが・・・という方、そのデザイン力を発揮して、さらなる表現にチャレンジしてみませんか?

 

( ・ㅂ・)ノ<ぼくといっしょにPHPとかJavaScriptとかJqueryとか極めようよ!

 

3.最後に

( ・ㅂ・)<最近さむいね。体に気を付けて。応募待ってますよ。

 

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

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

ツイッターはこっち。

https://twitter.com/SDO3016

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

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

2018年1月1日

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

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


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

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

cd272fbade2abeb137b2fda57a33fd49_s

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

2017年7月7日

【九州北部豪雨のお見舞い】

このたびの豪雨等により、被害に遭われたみなさまに謹んでお見舞い申し上げます。

 

被害に遭われた方々への救出、救援が一刻も早く行われ、復旧作業に従事されている皆様のご安全と被災地の一日も早い復旧を心よりお祈り申し上げます。

デザインオフィスタイト スタッフ一同

feed
2017年4月26日

rssとかをサイトに表示させたら最新が出なくて無理やり直した

外部ブログのrssだとかfeedだとかをホームページに表示させたら、
最新が表示されてなくて無理やり直した話です。



おつかれさま。こんにちは。皆様お元気でしょうか。
「プレミアムフライデー」、覚えてますか?
なんでしたっけ。



さて、ここ数日、いくつかのホームページに表示させている外部ブログサービスのfeedやrssが最新にならず、 解決法を探したけど無かったので号泣しながら無理やり解決した状況を記しておきます。



ozyama

状況

その1.ワードプレスを利用している。

その2.いくつかは、RSSを呼び出すのに便利で手間のかからないワードプレスのプラグイン
   「RSS Antenna」 を利用している。

その3.いくつかは、手書きのPHPで直接読み込んでいる。



症状

その1.FC2のRSSをホームページに表示させたけど、内容が3日前の記事。
   (最新記事は別にあり)

その2.アメーバブログからホームページにRSSを表示させたけど内容が30日前の記事。
   (最新記事は別にあり)

その3.ライブドアブログからホームページにRSSを表示させたけど内容が3か月前の記事。
   (最新記事は別にあり)



原因の追究

それぞれのブログはそれなりに更新されているが、前の情報が表示される。 それぞれのRSSやFEEDをチェックしたら、ちゃんと最新。
・・・原因はキャッシュが残っているから?



super_reload

解決への道

新しい情報が表示されない症状が出ているときに試してみた。

スーパーリロード(Ctrl+F5)を連打。>無駄。 rssの画面でスーパーリロード(Ctrl+F5)を連打。>無駄。

>>解決したとしても、閲覧されるユーザーにしてもらわないといけないので無意味。

>>プラグイン上、またはPHP上で解決を図る必要がある。



そこで、ふと思い立って「RSS Antenna」の設定を変えてみた。

RSSフィードのところに書かれている~~index.rdfの後ろに、アレを足します。

管理画面

これで、HP上を確認してみると、なるほど。最新のRSSに更新されました。

「よし、書いた後にクライアントにこの?の後ろの数字を変えてもら」うなんて、
とんでもないので、自動化します。





「RSS Antenna」を無理やり改造。



いろいろ考えた結果、「RSS Antenna」に無理やり1行足すことにしました。

以下、自己責任ゾーン。

プラグイン名 RSS Antenna version2.1.0

rss-antenna.php 233行目付近。

private function createItems(){ $feed_count = $this-->setting['feed_count']; 
$feed_urls = $this->getFeedArray($this->setting['feeds']);

private function createItems(){ $feed_count = $this-->setting['feed_count']; 
$feed_urls = $this-->getFeedArray($this->setting['feeds']); //キャッシュ対策で日付を追加してみる 
$feed_urls[0] .="?".date("ymdH");

date(“ymdH”);は日付と時間が挿入されるので、これで1時間おきにRSSを読み込みなおすはず。

ちなみに「RSS Antenna」内にもキャッシュをクリアする一文があるような雰囲気だったんですが、なぜ効かなかったんだろう。不思議ですね。

rss-antenna.php 222行目付近。すでに30分おきになってました。

const CATCH_TIME = 3600;//3600秒 = 1時間
const CATCH_TIME = 1800;//1800秒 = 30分




PHPでRSSを取得するところに1行追加。



PHPでRSSを取得する方法については、どこからか拝借して利用したのですが、忘れてしまいましたので、 RSSのURLを指定するところの一文を加えましたよってところだけ紹介しておきます。

$rssurl = '取得するブログのURL.blog.fc2.com/?xml';
$rssurl = '取得するブログのURL.blog.fc2.com/?xml'; 
$rssurl .= '&'.date("ymdH");

これでOK。最新情報が表示されるようになりました。



ozyama2

さてこれで、晴れて最新の情報が表示されるように改良したわけです。 キャッシュの問題は根強いですね。

インパクトあるウェブサイトを作るためにタイトが使った3つの手法
2017年3月29日

インパクトあるウェブサイトを作るためにタイトが使った3つの手法

1.アニメーション

最近、当社のデザイナーではやっているのが、ホームページでのちょっとしたアニメーションの作成です。
昨年完成したホームプラス様の時は、TOPページからしっかりアニメーション、初めて来た方へのインパクトを与えることに成功しておりますが、後藤博多人形様のサイトでは、はじめから映像でまずインパクトを。その後、スクロールするたびに表示される画像で、デザインの動きを多用しています。



動くデザインといえば、ひと昔前はフラッシュを多用していました。
見た目はいいのですが、その当時の回線が細く、表示するまでに一苦労。また、セキュリティ的な面から見ても、淘汰されていくという、アニメーションと離れたデザインになっていきました。



1
http://f-homeplus.com/

2
http://www.hakata-doll.co.jp/



今は、別の手法としてJavascript、jQueryを使って、アニメーションを実現しています。
映像も取り入れることが出てきました。
ホームページに入ったらまず映像が流れる、なんてホームページも増えています。



2.映像コンテンツ

当社グループのスマイル検索隊が開始したストリートビューのランディングページでも、大胆な手法をとっています。



3
http://smaken.jp/streetview/

はじめに流れる映像は、当社の”元ミュージシャン”の社員が担当。
「ルールに沿って映像を作るのは初めて。」と言ってましたが、間のとり方はばっちり。
映像を作っていたとは聞いてましたが、いい作品ができたと思ってますよ。



3.Googleストリートビュー

さらにストリートビューを初めてページに埋め込みました。
Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。
Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。



大事なことなので2回書きました。



Googleストリートビュー(屋内版)の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。



これ、とても強烈なことです。



Googleストリートビュー(屋内版)は、おそらくこれからスタンダードになります。
他のお店との差別を図るなら、早めの登録がいいでしょう。



実は、ここには書けない、タイトでは紹介できない実績もあります。
これからくるであろう、動的なコンテンツ作りにもっともっと、対応していかないとですね。



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でした(*’▽’)