月別アーカイブ: 2016年2月

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との違いはせいぜいボタンの位置だけのような感じになりました。

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

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上で商品販売から申込決済システムまで簡単に導入することができますね!

 

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

 

 

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

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

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

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