9月6日午前3時ごろに北海道地方を震源とする地震により被災されたみなさまに謹んでお見舞い申し上げます。
被害に遭われた方々への救出、救援が一刻も早く行われ、復旧作業に従事されている皆様のご安全と被災地の一日も早い復旧を心よりお祈り申し上げます。
デザインオフィスタイト スタッフ一同
このたび台風21号の影響により被災されたみなさまに謹んでお見舞い申し上げます。
みなさまの安全と、一日も早い復旧を心よりお祈り申し上げます。
デザインオフィスタイト スタッフ一同
( ･ㅂ･)ノ＜皆さんこんにちは。デザインオフィス タイトの松林でございます。
今回、デザインオフィスを運営している株式会社スマイルホールディングスでは、私たちのチームに入ってくださる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/
ツイッターはこっち。
応募、お問合せはこちら。
旧年中は格別のご厚情を賜り、誠にありがとうございました。
皆様のお陰で無事に新しい年を迎えることができました。
私たち社員一同、「お客様に喜んで頂けるホームページをつくる」という基本に立ちかえって、地道に、ひとつずつ、目の前のできることから取り組んで参りたいと存じます。
本年も変わらぬお引き立ての程よろしくお願い申し上げます。
皆様のご健勝とご発展をお祈り申し上げます。
デザインオフィスTIGHT（タイト） 社員一同
このたびの豪雨等により、被害に遭われたみなさまに謹んでお見舞い申し上げます。
被害に遭われた方々への救出、救援が一刻も早く行われ、復旧作業に従事されている皆様のご安全と被災地の一日も早い復旧を心よりお祈り申し上げます。
デザインオフィスタイト スタッフ一同
外部ブログのrssだとかfeedだとかをホームページに表示させたら、
最新が表示されてなくて無理やり直した話です。
おつかれさま。こんにちは。皆様お元気でしょうか。
「プレミアムフライデー」、覚えてますか？
なんでしたっけ。
さて、ここ数日、いくつかのホームページに表示させている外部ブログサービスのfeedやrssが最新にならず、 解決法を探したけど無かったので号泣しながら無理やり解決した状況を記しておきます。
状況
その1.ワードプレスを利用している。
その2.いくつかは、RSSを呼び出すのに便利で手間のかからないワードプレスのプラグイン
「RSS Antenna」 を利用している。
その3.いくつかは、手書きのPHPで直接読み込んでいる。
症状
その1.FC2のRSSをホームページに表示させたけど、内容が3日前の記事。
（最新記事は別にあり）
その2.アメーバブログからホームページにRSSを表示させたけど内容が30日前の記事。
（最新記事は別にあり）
その3.ライブドアブログからホームページにRSSを表示させたけど内容が3か月前の記事。
（最新記事は別にあり）
原因の追究
それぞれのブログはそれなりに更新されているが、前の情報が表示される。 それぞれのRSSやFEEDをチェックしたら、ちゃんと最新。
・・・原因はキャッシュが残っているから？
解決への道
新しい情報が表示されない症状が出ているときに試してみた。
スーパーリロード（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。最新情報が表示されるようになりました。
さてこれで、晴れて最新の情報が表示されるように改良したわけです。 キャッシュの問題は根強いですね。
1.アニメーション
最近、当社のデザイナーではやっているのが、ホームページでのちょっとしたアニメーションの作成です。
昨年完成したホームプラス様の時は、TOPページからしっかりアニメーション、初めて来た方へのインパクトを与えることに成功しておりますが、後藤博多人形様のサイトでは、はじめから映像でまずインパクトを。その後、スクロールするたびに表示される画像で、デザインの動きを多用しています。
動くデザインといえば、ひと昔前はフラッシュを多用していました。
見た目はいいのですが、その当時の回線が細く、表示するまでに一苦労。また、セキュリティ的な面から見ても、淘汰されていくという、アニメーションと離れたデザインになっていきました。
今は、別の手法としてJavascript、jQueryを使って、アニメーションを実現しています。
映像も取り入れることが出てきました。
ホームページに入ったらまず映像が流れる、なんてホームページも増えています。
2.映像コンテンツ
当社グループのスマイル検索隊が開始したストリートビューのランディングページでも、大胆な手法をとっています。
はじめに流れる映像は、当社の”元ミュージシャン”の社員が担当。
「ルールに沿って映像を作るのは初めて。」と言ってましたが、間のとり方はばっちり。
映像を作っていたとは聞いてましたが、いい作品ができたと思ってますよ。
3.Googleストリートビュー
さらにストリートビューを初めてページに埋め込みました。
Googleストリートビュー（屋内版）の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。
Googleストリートビュー（屋内版）の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。
大事なことなので2回書きました。
Googleストリートビュー（屋内版）の登録からホームページへの埋め込みまで、当社で問題なくできるようになりました。
これ、とても強烈なことです。
Googleストリートビュー（屋内版）は、おそらくこれからスタンダードになります。
他のお店との差別を図るなら、早めの登録がいいでしょう。
実は、ここには書けない、タイトでは紹介できない実績もあります。
これからくるであろう、動的なコンテンツ作りにもっともっと、対応していかないとですね。
皆さんこんにちは。
さて、当社サービスのRELEASEですが、youtubeを通して動画を投稿することができるのです。
ご存知でした？
今回は、「自分で撮影したオリジナルの動画を投稿する方法」をお伝えします。
去る10月15日に開催された福岡県福岡市東区の花火大会を投稿しようと思います。
ちなみにこの花火大会、9月に開催予定だったのですが台風でお流れに。
でも、花火大会運営の皆様が頑張って、10月15日に延期の形で開催にこぎつけたものなんです。
頭が下がる思いです。すごい！
それでは、手順を紹介いたします。
アイフォンからユーチューブ、そしてリリースに投稿する
必要なアプリ
・写真（アイフォンに初期で入っています。）
・YouTube（ダウンロードが必要です。）
必要な情報
youtubeのログインIDとパスワード（Gmailといった、グーグルのサービスで作ったアカウント情報で入ることができます。）
1.まず、YouTubeに動画をアップロード
さて、撮影した動画は私のアイフォン7の中に入っています。
その動画はアイフォンの「写真」から確認することができます。
写真 ＞ ビデオ ＞ 投稿する動画を選択。
ではここで右下にある□に↑の重なったマークを押します。
このマーク、共有のアイコンです。
そしてここに出てくるyoutubeのマークを押します。
ここで、youtubeにログインしていないときは、ログイン画面が表示されます。
ログインしたら、動画の情報を入力する画面が出てきました。
情報を入力していきましょう。
情報を入力し終えたら右上にある「公開」を押しましょう。
公開している状況が、画面の下に表示されます。
動画が公開されました！
さっそくyoutubeで見てみましょう。
おっと、エラー？
大丈夫。これは公開された後も、動画の後処理をyoutubeがしているのです。
もうちょっとだけ待つと、、、
無事公開されました。
さて、ここからRELEASEに投稿しましょう！
2.RELEASEに投稿
RELEASEでは、投稿の際youtubeのアドレスを張ることで、動画として紹介することができます。
でもアイフォンのアプリのどこからアドレスをどこからコピー？
その手順を紹介します。
これの・・・動画を一回タップすると表示される、ここです。
このクルン、とした矢印をタップして、
リンクボタンを押すとアドレスがコピーされます。
そして、インターネットを見ることができるブラウザで、いつものRELEASEから、
http://release.co.jp/pins-settings/
「ウェブから画像をアップロード」を押しっぱなしに。
レンズが出たら指を離します。
すると、「ペースト」が表示されます。
この「ペースト」をタップしましょう。
「画像取得」をタップして、
投稿する動画のサムネール画像をタップ。そして、
投稿画面がでてきます。
思い思いの言葉を入力して、投稿ボタンでフィニッシュです。
http://release.co.jp/r/257940/
今回はRELEASEに動画を投稿する方法を紹介しました。
youtubeにアップされている動画であれば、RELEASEに紹介することができます。
今回は個人的な動画を紹介しましたが、皆さんの会社のサービスを動画で紹介したい！という
方は、youtubeに投稿されたアドレスを入れるだけで、RELEASEに紹介することができます。
ぜひ、動画でも投稿してみて下さい。
みなさんこんにちは。Web制作チームの松林です。
さて、株式会社スマイルホールディングスでは、新しいサービス「PRESIDENT BANK ＝プレジデント バンク＝ 日本を支える中小企業の経営者たち…」を立ち上げました。
プレジデントバンク お申込ページはこちらから。
http://presidentbank.jp/lp/
このサービスは、個人、中小企業の経営者の皆様にスポットを当てたものです。
そして会社の発展とPRのツールとして大変役に立つものになっています。
今回はその全体的な概要をお伝えします。
プレジデントバンクの3つの特徴
1.自社への売り込みができる 他社へのコンタクトがとれる
会社にとって事業のPRは必須です。
お客様に対して、自社がどのような事業をしているかPRするページを準備しています。
ただ、通常のホームページと違うのは、経営者の方にスポットを当てているということ。
プロフィールや企業の理念、目標があり、信念をもっていることをPR。
ただ商売をしているだけではない、気持ちを伝えることで興味を持っていただこうという趣向です。
そしてビジネスマッチング。
PRページから気持ちが伝わった企業からのコンタクトをぜひ獲得していただきたいと
思います。
2.採用情報掲載で 人材を呼び込む
前述のPRを見るのはお客様、将来のお取引企業だけではありません。
就職、求職、転職をしようと考えている方にとっても、重要な情報です。
ハローワークや、民間の求人サイト等と違うのは、経営者がみえるということ。
自分にあった企業探しには最も重要な情報の一つです。
働く環境や条件のほかに、経営者がどのような方なのか。
それは、これから就職しようと思う人たちにとって重要な情報のひとつとなります。
3.これらの情報をGoogleやYahooに検索されやすいポータルサイト
当然のことですが、いわゆるこのサイトの「SEO」です。
まず、大手検索サイトにすぐ登録されます。
プレジデントバンクはこれまで培ったSEO対策をしています。
そしてさらに幅広く情報を広げます。SNSです。
フェイスブック、ツイッター、グーグル+をはじめとして、
マイナーといわれるタンブラー、ピンタレスト、当社が運営しているリリースにも紹介。
幅広い情報拡散を進めています。
これから。
今回、私はプレジデントバンクの開発担当として携わってまいりました。
最近ではIT産業の発達で、様々な分野で多様化が進んでいます。
その多様化に対応できるのは規模が小さく、かつフットワークのよい
個人企業、中小企業です。
昔から個人企業、中小企業は日本を、いや世界を支える大きな存在です。
そのお手伝いをこれからもしていきたい。
その思いを胸にプレジデントバンクの「改良」はこれからも続きます。
ぜひお申込みください。
プレジデントバンク お申込ページはこちらから。
http://presidentbank.jp/lp/
みなさんこんにちは。Web制作チームの部長、普段はこっぱずかしくてブログ上ではmatで書いている松林です。
今回、デザインオフィスタイトを運営している株式会社スマイルホールディングスでは、私たちのチームの一員となってくれるWEBデザイナー・HTMLコーダーを募集します。
http://release.co.jp/r/211994/
｜Дﾟ)＜あ、すみません。営業職も募集中です。
ここでは「デザインオフィスタイト」の一員として働いてくれるクリエイティブ職についてお話します。
1.そもそもタイトはどんなところ？
デザインオフィスタイトは、ウェブサイトの制作をしています。
制作実績 http://smile-design.bz/tight2/working/
そのデザインの傾向はここ数年変化しており、時代に合った、挑戦的なものを制作しています。
その制作物のほとんどはワードプレスによる案件です。
「ウェブサイトは管理できて、アピールを続けてモノになる」その当然のことが簡単にできるように。ですので、「デザインオフィスタイト」の一員になるということは、「まずワードプレスができなきゃいけない」ということでもあります。
2.必要な技術（スキル）は？
「デザインオフィスタイト」の一員になるために求められるスキルはHTML、スタイルシート、そしてデザインです。
WEBデザインを考える際にはHTML、スタイルシートの知識があるないで相当変化します。
良いデザインを生み出すためにもこの3つは欠かせません。そして「タイト」は少数チームで形成されていますので、必要に応じてコーダーをしてもらいます。
( ･ㅂ･)ノ＜あ、入った後にはPHPとかJavaScriptとかJqueryとか
データベースのこととかいろいろ覚えてほしいよ。
3.こんな人に来てほしいよ。
多少スキルが低くても、成長したい！成長願望が高い、そんな人はバッチリOKです。
どの業種でもそうですが、ＷＥＢ業界でいえば、制作方法や使用する技術、デザインの動向の変化が激しい業界です。
一通りの技術を覚えてもなお、業界の変化についていく必要があります。そのためには自分でその変化を感じ取り、新しい技術が出たらそれらを実践する。そんな人をお待ちしてます。
ほかにもなんか書いてるデザインオフィスタイトのフェイスブックページはこちら
https://www.facebook.com/smiledesignoffice/
ツイッターはこっち。
応募、お問合せはこちら。
デザインオフィス TIGHTで制作させて頂いた、
「小野建設有限会社」様のホームページが2016年4月20日に公開となりました。
小野建設様は筑紫野市に本社を構える建築会社です。
新築、リフォームから解体工事まで、大きな事業から個人の仕事、人が敬遠しがちな仕事でも、お客様が望むすべてに対応できるすばらしい会社です。
幅広くいろんなことができるので、制作実績も多種多様となっています。
制作実績もおおきく二つにわけて、お客様が見やすいサイト創りを心がけました。
また、平成19年度より筑紫野市商工会が立ち上げた「紫プロジェクト」にも参加し、紫芋の低農薬栽培と紫芋を使用したお菓子の販売を行っています。
新着情報にこれまでの活動を書いてあるので興味のある方はぜひ読んでみて下さい。
【URL】小野建設有限会社 新着情報
お客様の声と反響
お忙しい中、写真や文章など、小野建設様にはたくさんのご協力をいただきました。
こちら側からの要望も多かったにも関わらず、快く対応していただき、サイトを作り始めてから公開までとてもスムーズに行うことができました。
人に寄り添い、お客様のことを第一に想う、アットホームな雰囲気の小野建設様のことをサイトを通してしっかり伝えたい！という気持ちを胸にサイトを作成し、その想いが伝わったのかお客様には満足度96％というすばらしい評価をいただきました。
アンケートを実施した時のお客様の実際の声を公開いたします。
（お客様に了承を得ています。）
小野建設様も筑紫野市で一番良いサイトだという声を、お客様からいただいたそうで、私たち社員一同もとてもうれしいです！
筑紫野市で新築やリフォーム、土入れ、外壁等の外回り工事、解体、整理処分などご検討中のお客様はぜひ小野建設様にお問い合わせください。
【お問い合わせ】http://onokensetu.com/contact/
これからも、小野建設様の益々のご発展をお祈りしております。
小野建設有限会社様
〒818-0003
福岡県筑紫野市山家3721
TEL：092-926-1831
【小野建設有限会社様ホームページ】http://onokensetu.com/
株式会社牛島製茶様の、楽天市場ホームページでの
母の日ギフト特集ページをデザインオフィスTIGHTで制作させて頂きました。
牛島製茶様はお茶どころとして有名な福岡県八女市にて、
大正10年からお茶づくりをされている老舗の八女茶専門の会社です。
自家茶園での栽培、自家工場での製造、自家販売にこだわり、全ての工程を自社で行われています。
今回、新茶の時期ということで、新茶と八女玉露スイーツがセットになった、
母の日ギフトの特集ページを作成させて頂きました。
昔から、八十八夜（5月２日頃）に摘んだ新茶を飲むと、元気に長生きできると言われており
母の日や父の日などの贈り物として、大変喜ばれています。
また、八女玉露を贅沢に使用したバームクーヘンやラスクなどの和のスイーツは、
上品な甘さで八十八夜摘み新茶とも相性ぴったり。
こちらの母の日ギフトは豪華な重箱入りで、
牛島製茶の社員の方が心を込めて風呂敷で一つ一つ包まれています。
メッセージカードも無料でサービスされていて、オリジナルのメッセージ内容も
社員の方が手書きで対応して頂けますので、
母の日はもちろん、父の日や誕生日の贈り物にも幅広くご利用頂けます。
大切な人への贈り物にぜひどうぞ！
株式会社牛島製茶
住所：〒834-0024 福岡県八女市津江397
0943-22-4818
いつも大変お世話になっております。
デザインオフィスTIGHT（タイト）です。
誠に勝手ではございますが、ゴールデンウィーク休業を
下記日程において取らせていただきます。
【休暇日程】
5月1日(日)〜5月5日(木)まで
尚、ゴールデンウィーク休業中は、
メールやお電話等でのお問い合わせに対する
ご返答が遅れる場合がございますので
予めご了承ください。
以上、ご繁忙の折、
大変ご迷惑をおかけいたしますが、
何卒、ご理解ご協力の程、
よろしくお願い申し上げます。
デザインオフィスTIGHT（タイト） 社員一同
デザインオフィス TIGHTで制作させて頂いた、
「有限会社 HOME PLUS（ホームプラス）」様のホームページが2016年3月18日に公開となりました！
ホームプラス様は福岡市早良区に本社を構える建築会社で、
リフォームやインテリア・内装、増改築などを専門に、
福岡を始め、九州を中心に多くの案件を手掛けていらっしゃいます。
元々ホームページをお持ちでしたが、事業の拡大とさらなるインターネットからの広告・集客を目指して、
今回、TIGHTでホームページのリニューアルを担当させて頂きました。
サイトのトップページには「あ、いいねをプラスする」という企業コピーを印象付けるオープニングのアニメーションを設置！
取り扱いされている事業を項目別に紹介するページを追加し、リフォームの施工実績はビフォー・アフター形式で一目見てわかりやすいようにしました。
お客様の声と反響
今回、公開前の数ヶ月は、建築業界でも忙しい時期だったにもかかわらず、
何度もお話しをお伺いしたり、写真をご提供頂いたりと快くご協力頂きました。
そういった、社長を始めとしたホームプラス様のお人柄が伝わるようなサイトにしたい！
そんな気持ちで社員一同制作させて頂きました。
納品したホームページはホームプラス様にも大変お喜び頂き、
お取引のある会社様にもホームページを見せて頂いたりと、早速ご活用頂いているそうです。
また、リニューアルオープン後に早速ホームページからのお問い合わせもあったとの報告を頂き、
TIGHT社員も大変うれしく感じています(●´v｀●)
九州にお住まいの方でリフォームや内装工事をご検討されているお客様は、
ぜひホームプラス様へ公式サイトからお問い合わせ下さい♪
お見積りや不明・不安な点のご相談にももちろん、とても親切にご回答頂けますよ！
これからも、ホームプラス様の益々のご発展をお祈り申し上げます！
有限会社ホームプラス
住所：福岡県福岡市早良区小田部1丁目24-4-2
TEL：0120-406-013
こんにちは！WEBデザイナーのANAです。
現在弊社では和風デザインのWEBサイトを作成しています。
和のデザインは一見すると簡単そうですが、とても奥深く実際につくるとなるとなかなか難しいです。
これは私個人の意見ですが、私は和のWEBサイトがすごく好きです。
やっぱり日本に生まれたからには、ここに載せてあるような、秀逸な和風デザインがつくれなきゃ！ですね(*’ω’)
「秀逸な和風デザイン WEBサイト10選」、ぜひお客様の参考になればと思います。
●韓国懐石 しづる
【URL】http://sizzle-tsurumi.com/
韓国料理のサイトです。
細部に和の雰囲気を感じさせます。
全てのページにおいて、コンテンツの見易さが特徴的です。
伝えたいことをしっかり伝えています。
●SAKUZAN
【URL】http://www.sakuzan.co.jp/
岐阜にある美濃焼きの工房「SAKUZAN」さん。
本来製品上シックなになりそうなサイトですが、上手にモダンに魅せています。
共通して使用している細かい装飾がサイトの一体感を出していて、
今風なのに伝統を感じさせます。
●シェアバイク ミナポート
【URL】http://minaport.jp/
観光地などで自転車を借りることができるサービスのサイトです。
人の目線とコンテンツの動きを、少なすぎず多すぎず計算しておかれています。
基本写真で魅せていますが、説明部分などでイラスト使用しているのであたたかみがあります。
●ヤヱガキ酒造
【URL】http://www.yaegaki.co.jp/sake/
兵庫県にある酒造の会社。
写真と、サイトカラーの白、黒の文字がはっきりしているサイトで、
シンプルなのにインパクトがあります。
テキストと効果的な写真の使い方で、商品の良さを伝えています。
●榛原
【URL】http://www.haibara.co.jp/
東京にある200年以上つづく和紙舗さん。
赤の中でもピンクや紫にちかいビビットの効いた色使いで、サイトを見た瞬間から目に飛び込んできます。
和の雰囲気の中にも使用しているアイコンや背景などは可愛らしくまとめていて、固くなりすぎない配慮が見えます。
●白玉の湯 華鳳
すごくクオリティの高いサイトです。
見せ方を十分に理解して作成されています。
ひとつひとつのデザインが繊細で細やか、背景一つ、文字一つとっても文句のつけようがありません。
情報量が多いのにまとまっていて、際の見易さもピカイチですね。
私個人でいうとお気に入りのサイトの一つです。
●本家 尾張屋
【URL】https://honke-owariya.co.jp/
京都にある和菓子屋さん。
フォントの使い方、言葉の選択にセンスを感じます。
スライドの中にテキストがあって、スライドショーが切り替わるようになっています。
スライドの中に文字があるのに邪魔してないのがまたいいですね。
●角館 伝四朗
【URL】http://denshiro.jp/
桜皮を使用して樺細工を創っているお店です。
写真の良さはもちろんあるんですが、その写真をしっかり活かしてシンプルにつくり上げています。
構成がすばらしいので、ユーザーも迷うことなく見たい商品にたどり着けますね。
●鈴乃屋
【URL】http://www.suzunoya.com/753/index.php
七五三に向けた子供用の着物を紹介するサイトです。
着物と聞くと、和のテイストを前面に押し出したサイトが良く見られますが、
子供が対象ということもあり、ポップで可愛らしいそれでいて和の要素を残しています。
なんといってもグリッドデザインが効果的に使われているサイトです。
●株式会社ドングリ
【URL】http://www.don-guri.com/doncon/
株式会社ドングリのコンサルティングのページです。
手の込んだサイトで、ひとつひとつのキャラクターを作るのにどれくらいかかったんだろう…と
心配になるほど細かいところまでしっかりとつくられています。
見ていておもしろいサイトですね♪
どうでしたか？秀逸な和風デザイン WEBサイト10選。
日本の良さを改めて再確認できるWEBサイトばかりでしたね！
みなさんもぜひお気に入りのWEBサイトを見つけてみてください♪
それではANAでした～
こんにちは！WEBデザイナーのANAです。
今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。
アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。
ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない！
というわけで、簡単なやり方でなんとかできないか？と思いやってみたのが
「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。
つまりどんなことがしたいかというと、
サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す
と言う流れ。
今回Bike GIFをお借りして簡単に方法をご紹介しようと思います！
アニメーションを表示させる
まずはここから！
先ほどのアニメーションをサイトに入れておきます。
で、アニメーション終了後に表示させたいソースも書いておきます。
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
アニメーションを○○秒後に消す！
では次のステップ！
以下の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秒後に表示する指示を出してあげます。
しかも、ただ出すわけでは面白くないのでフェードインして表示させます。
メインのコンテンツをフェードインさせながら出そう！
ここでも同じく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です。
もうかれこれ20年近く、仕事効率を図るための表計算ソフトといえばエクセル、ドキュメントはワード、そしてプレゼン資料作りにはパワーポイントが主流でした。
今でもこれらのソフトを使いこなす猛者がたくさんいらっしゃるでしょう。
かという私も、某検定でExcel2級、Word2級というものを必要に迫られて取った経験があります。
PHP取得後だったのでエクセルはちょっとしたプログラム感覚で関数を覚え、ワードは「多少間違えてもいいからとにかく見た目通り完成させればOKな検定だなこりゃ」と、キーボードバシバシたたきながら、なんとかとった覚えがあります。
今ではそんな知識も半分以上忘れながらも、それらの知識をgoogleDriveで生かしてます。
あれ？
さて、検定まで取ったなぜ私がgoogleDriveを選んだのか、そしてどのようにして活用しているのかをここでお伝えしたいと思います。
GoogleDriveにした理由1：無料（ただし課金サービスあり）
一応、課金で保存容量が増えるというサービスがありますが、基本は無料。しかも、課金の有り無しに関係なく機能的な制限は全くといっていいほどありません。
（今後、多少変わる可能性はあるかもしれませんが。）
しかも容量制限は15Gと、文書を作るだけだったら、いったいどれだけの時間を費やせばいいかわからないほどの書類数が保存できます。
ちなみにこの容量制限、グーグルのフリーメールであるGmail、画像の保存や整理ができるGooglePhotoでも使用されます。ただ、それでも2年ほど使っている私でさえ1G超えるかどうか。
尋常じゃないほどのヘビーユーザーでない限りは足す必要もないかも。
でも、安かろう悪かろうじゃ？と思っている方もいるでしょう。
GoogleDriveにした理由3：officeと特別変わらない機能
GoogleDriveにはいくつかのファイル形式を扱うことができます。
文章ファイル形式の「goolgeドキュメント」
表形式ファイルの「goolgeスプレッドシート」
プレゼンテーションを作るのに便利な「goolgeスライド」
ぶっちゃけると
「goolgeドキュメント」＞ワード
「goolgeスプレッドシート」＞エクセル
「goolgeスライド」＞パワーポイント
ですね。
ああ、申し訳ないけどこれだけでも十分。
この3種類を主に、他にも様々な形式でファイルを作ることができます。
google以外の会社が独自の形式のファイルを作れるようにと、googledocumentのアプリとして、様々なサービスを提供しています。
それらの様々なサービスは、また気が向いた時にでも紹介するかな。
GoogleDriveにした理由3：クラウドだから進化が早い
さて、そんなGoogleDriveも、やはりオフィスにはかなわないところがありました。
「officeではできたのにGoogleDriveではできない！」
「GoogleDriveもまだまだだな。」
たしかにサービス開始時はとてもじゃないけど使いにくい。そんな印象でした。
ところが、どうも日がたつにつれどんどん使いやすくなっている。
officeでないとできなかかった機能が付きだし、今では遜色のない使い心地に。
これは、いわゆるクラウドサービスだからできる、リアルタイムな機能追加。
これによって、GoogleDriveの使い心地はどんどん良くなってきているのです。
GoogleDriveにした理由4：複数ユーザーによる同時編集ができる！
さて、これまではofficeにできてGoogledocumentにはできなかった、それに追いついてきたということをお伝えしましたが、次はGoogledocumentの一番の魅力、複数ユーザーによる同時編集についてです。
これ、今回の記事の一番大事なところ。
GoogleDriveにはファイルを共有したいユーザーにファイルを公開、さらには編集させることができるのです。
しかも、ただ編集するだけではなく、複数のユーザーによって同時に編集ができる！
これを使えば、一つの書類をみんなで同時に作ることができるのです。
「このファイルのココのところは〇〇さんの得意分野だから作ってー！」
「この情報自信ないから書き直してー」
と言ったことが、「今保存して閉じといたよー」という会話なしに即座に編集できるのです。
officeでも最近そういったことができるようになっているようですが、やはりこの便利な機能を早くに作り出したのはすごい！
この機能を活用すれば、社内の書類を作るのもかなりの時間短縮にもなります。
「今度の週報会議、自分が担当しているところを更新しといてー」
この使い方をすれば、誰かが作業を終わらせるまで待たなくてもOK。
当社でもこれを使って日報を全員に書かせています。
今日やった作業一覧を同じファイルに書く。
それぞれがメールで報告するより断然早くなります。
具体的にはこのような感じ。
これで途中に入っている、メールを編集する作業が格段に速くなるわけです。
仕事効率化にはもうすでに手放すことができない存在となったGoogleDrive。
officeとの違いはせいぜいボタンの位置だけのような感じになりました。
それぞれの使い方についてもまた、追って書いていくかもしれませんが、今日はこの辺で。