STAFFBLOG スタッフブログ

アイディア発想法 ①

hashimoto
2014/08/28
閲覧所要時間:約2

012-512x325

こんにちは橋本です。

ブログ更新2回目となりますが、早くもネタ切れです・・

どうしよう・・書けなかったら、ママに怒られるよ・・

たすけてー!どらえ◯もーん!

 

タタタタッタ ターン♪  『マインドマップ〜』

 

マインドマップとは

a1180_010001

心の内側を検索するための思考・発想法。

心の中に散らばるアイディアやネタなどを隅々まで手早く探し、拾い集めることができる。

頭の中で起こっていることを目にみえるようにできるので、

その情報を整理し、さらに発想を広げたりできるすぐれものである。



さあ、さっそくやってみよう!

 

マインドマップの作りかた

テーマを決める

a1180_010001

そうですね・・たとえば、動物好きな方から「動物」のロゴを頼まれたとしましょう。

今回のテーマは「動物」で。


 

枝を広げる

a1180_010001

テーマから連想されるキーワードを周囲に書き加えます。

思いつくまま気のままに〜♪(絵でもいいです)

 

関連性のあるキーワードをグループ化する

a1180_010001

テーマの周囲は同じカテゴリーに属するもの(関係のあるもの)が集まりやすいので、

それらをグループ化します。グループごとに色分けをすると解りやすいです。


 

試す

a1180_010001

ありったけのキーワードを書きつくしたら、見ながら整理し、組み合わせます。

そして、それを形にしましょう!


 

マインドマップツール

a1180_010001

今回使わせていただいたツールはCoggle(Webアプリ)です。

https://coggle.it/

GoogleアカウントでログインするだけでOK!無料です!!(英語ですが)

 

さいごに

紙と鉛筆さえあれば出来るマインドマップ!

ロゴやデザインだけではなく、企画作りになどに役立ててみてはいかがでしょうか。

のび◯くんのようなそこのアナタ!まず一度 試してみてくださいね〜

 

ブログの記事にソーシャルボタンを付けたいんだけど

shuhei
2014/08/28
閲覧所要時間:約3

おはこんばんちは、にしむらです。

今年の夏は日照時間が少ないそうですが、暑いもんは暑いですよね。
どうせ暑いんだったら晴れてくれよ洗濯物干しにくいだろ!とか最近よく思ってます。

お盆は何してたかって?(聞いてない)
そんなことより大型アプデだ!(ゲマ並感)


閑話休題


弊社のトップページから直接記事に飛んでもらった人はお気付きかもしれませんが、現在記事の上下にソーシャルボタン達がずらっと並んでいるかと思います。
(一覧で見てる人は記事のタイトルをクリックしてみてくださいね)

今回はWordPressに簡単にこのソーシャルボタン達を入れてくれるプラグイン「WP Social Bookmarking Light」を、導入する際に起こった事をおりまぜながらご紹介したいと思います。

プラグインのインストール

管理画面のプラグイン新規追加で「WP Social Bookmarking Light」と検索するか、下記のページでDLしてアップしましょう。

WP Social Bookmarking Light

有効化してみると、あら簡単ソーシャルボタン達が
スクリーンショット(2014-08-27-16.13.16)
なんか残念な事になっていました。

問題解決:Facebookが表示されてない編

左メニュー設定の「WP Social Bookmarking Light」から管理メニューを開くと下図のような画面が表示されます。
一般設定については図を参照
スクリーンショット(2014-08-27-16.04.01)
追加したソーシャルボタンによって上部タブメニューが追加されますが、表示されないFB likeの設定をどんだけいじっても変化がありません。なんでや。

スクリーンショット(2014-08-27 18.02.53)
原因はFB likeではなくFBの方でした。
Versionを当たり障りのなさそうなiframeにした所無事に表示されました。

問題解決:css編

WP Social Bookmarking LightのcssはStyleのタブで管理されています。
デフォルトの状態でも十分使えると思いますが、カスタマイズしたい方は自力で頑張りましょう。

スクリーンショット(2014-08-27 18.18.10)
で、実際なんでこんな縦並びになっちゃってるかというと、要するにここのcssが読み込まれてないだけですね(白目
弊社のブログではオリジナルテーマを使っているので、おそらくこのプラグインに必要な記述が抜け落ちてしまっているのではないかと思われます。
まぁ読み込まれてないのなら読み込ませればいい。
というわけでこちらのcssをまるっとコピーしてテーマファイルのどこかに置いてしまいましょう。
置いたらそのcssを読み込むようにテーマに追記するだけですね!(荒っぽい)
と、そんなこんなで無事cssの方も解決しました。

まとめ

昨今のSNS普及率には目を見張るものがありますね。
特に若者世代では知り合いのほとんどが何かしらのSNSをやっているといった状況ではないでしょうか。
web業界ですとさらにその比率は高いのではないかと思われます。
こんなニッチな内容のブログでも、SNSで超有名人がイイねとかしてくれたらそれだけでアクセスがグンと伸びるような世の中です。(してもらえるとは言ってない)
ちょっとの手間でそんな機会ができるかもしれないソーシャルボタン。
まだ試して無い方は是非チャレンジしてみてはいかがでしょうか。

【第二回】ごほうびガチャ結果報告!!

yamamoto
2014/08/27
閲覧所要時間:約1

こんにちは、ヤマモトです。
また、いくつか無事に案件を公開できたので「ごほうびガチャ」をまわしました!
今回は何が当たるんでしょうか?

▼前回のごほうびガチャ
嬉しいご褒美いっぱい!?『ごほうびガチャ』のご紹介。


今回のメンバーはこの3人

左から渡邉社長・若水さん・西川さん
s_IMG_8736s_IMG_8734s_IMG_8729

はたして結果は!?

s_IMG_8742
渡邉社長はハズレでした!>_<
駄菓子セットでした。心なしかショボーンとしているような(笑)

s_IMG_8744
若水さんはアタリ!
ハーゲンダッツでした!贅沢ですね〜

s_IMG_8743
西川さんもアタリ!
クオカード1000円分!!昨日はちょうどお誕生日でした!おめでとうございます!


今回はひどいハズレがなかったのでひと安心でした(笑)
個人的はハーゲンダッツがうらやましいです。
あと、慌てて撮ったせいか写真ボケボケでした、すみません!
それでは、また〜


Googleアナリティクスのアプリが便利です!

渡邉 直登
2014/08/18
閲覧所要時間:約2

みなさん、こんばんは!代表の渡邉です。

お盆休み、みなさんはいかがお過ごしでしたか?
僕は家族で久住にキャンプに行って、お墓参りをするという
毎年恒例になりつつあるお盆を過ごしました。

先月、GoogleがiOS向け「Google Analytics」公式アプリをリリースしたので
僕も早速インストールして使ってみてます。

Google Analytics on the App Store on iTunes

アンドロイド版Google Analytics

Googleアナリティクスのアプリ、めっちゃ便利!

実は自社サイトのアクセス解析って月1回ぐらいしか見てなかったんですね。
僕の場合、見るためにはアカウント切り替えしなくちゃいけない
煩わしさがあってのことが原因でした。

これまで公式じゃないアプリも使ったことがあるのですが
動作不安定だったり、表示が好みじゃなかったり。。。

このアプリはさすがの公式版!
使いやすいし、軽いし、安定してます。

スキマ時間の活用が出来るのが大きい!

アプリだと、いつでもどこでも、スキマ時間に
ちょっとアプリを1回タップするだけでアクセス解析結果が
きちんと見ることが出来るので頻繁に見るようになりました。

普段PCばっかり触っている僕ですらそうなのですから
やはりモバイルアプリは強力だなと感じます。

アクセス解析を見る習慣化が出来ると…

数字があがったり、下がったり、
この状況をどうしていこうかとか
色々考えるきっかけになります!

GoogleAnalytics画面

これは今日から先月の1ヶ月間の弊社サイトの画面です。

ちょっと前まで月間ユーザー数が1900とかでしたので
最近2000ユーザー/月越えできて、「おっ、超えた~」みたいな
感じで遊び感覚でアプリを開くようになってます。

写真

月間のページビューが9000台なんですが、これを
1万PVへ上げたいなーとか思ったりしてます。
この画面を見ると、火曜、水曜、木曜の午後3時前後が
一番閲覧されやすい時間帯だということも分かります。


やはり、良いツールがあっても使わなければいけませんね!
使うための環境ってとっても大事だなと改めて思いました。

皆さんもぜひインストールされてみてはいかがでしょうか!
おすすめします!

「何のためのデザイン?他」、WEB勉強会サトラボの活動報告。

yamamoto
2014/08/11
閲覧所要時間:約3

design (5)
こんにちは、ヤマモトです。
先週の土曜日は第105回目のサトラボでした!
(※第104回について先週書きそびれたので、追って更新します)

今回もなかなか濃い内容でしたので、概要を紹介したいと思います!

今回のテーマ

何のためのデザイン?(発表者:デザイン部部長河添さん)

納品を早めるために出来ることを考えよう!(発表者:ヤマモト)

WEB広告について(発表者:渡邉社長)


何のためのデザイン?

1
ただ単に、「かっこいいもの」「綺麗なもの」をつくることがデザインではありません。
目的】や【解決したいこと】が先にあって、それを達成・解決するためにデザインがあります。

キーワードとなったのは「シグニファイア」。
WEBサイトにもとりれることで、使いやすく、効果的に機能するHPにすることができます。

<シグニファイアとは?>
シグニファイアはそれが意図的かどうかに関わらず、ユーザを適切な行動へ導く知覚可能なサインである。 デザイナーはシグニファイアを使うことで、ユーザと自然な形でコミュニケーションすることができる。 シグニファイアは世界の中に自然な形に溶け込んでいるので、ユーザはコミュニケーションに苦労することが無い。


「じょうろ」がなぜ、今のようなデザインなのか?など分かりやすい解説を交えつつ、デザイナー含め制作スタッフ全員にとって一番必要な視点を再度確認し合いました!

納品を早めるために何ができるか考えよう!

2
FVの一番の課題と認識している「納品スピード」の問題。
今回はスタッフそれぞれが感じている課題をアンケートにとり、発表してもらいました。

かなり広範囲なプロセスにわたって、課題が浮き彫りになってきました。
今後、このアンケートを元にひとつひとつ解決策を考え、実行していきたいと思います。


WEB広告について

3 最後は、最近のWEB広告の動向について渡邉社長の講義。
Facebook広告など、最近の時流について解説して頂きました。
日々、めまぐるしいスピードで変化するWEB業界。このように定期的に情報共有することで、クライアントさんにフィードバックしていけるようにしたいです!

本気の庭掃除

5 余談ですが、
先週の記事「嬉しいご褒美いっぱい!?『ごほうびガチャ』のご紹介。」で見事大ハズレを引いてしまった河添さん。
今日の天気は曇りで風もあったため、「本気の庭掃除」を決行することになりました。

4 ↑一生懸命垣根をチョキチョキする河添さん。

6 全部で大きなゴミ袋3つ分になりました。

7 のび放題だった垣根もご覧のようにスッキリになりました!
河添さん、手伝ってくれた村川さんもお疲れ様でした!

初心者でも簡単!Illustratorで一瞬で花火を描いちゃおう!

murakawa
2014/08/07
閲覧所要時間:約3

はじめまして!村川です。

ちょうど1ヶ月前からフロンティアビジョンでwebデザイナーとして入社しました。
早く一人前になれるよう励んでおります!
これからどうぞよろしくお願いします。

8月に入り、いよいよ夏本番!
昨夜は近所で夏祭りがあったらしく、花火の音がドンドン聞こえてきました。夏ですね〜
727c1a7d442e1120c3a2ce875d819439_s
ということで、今回はIllustratorで簡単に花火を描いてみたいと思います。

①楕円形ツールで円を上下に2つ作る

円を作ったら、Shift+altを押しながら真下に円をコピーします。
少し小さめの円のほうが後で使いやすいです。
花火1

②回転ツールでコピーする

回転ツールで好きな角度に回転させ、コピーします。
この時あまり大きな角度にするとスカスカ花火になります。
花火2

②コピーを繰り返して円を作る

花火3
command+Dでさっきのコピーを下のように、円ができるまで繰り返します。

花火4

③できた円をコピーして重ねる

さっき作った円をコピーし、大きさを変えてどんどん重ねていきます。
円ごとにグループ化して整列をさせると、きれいに同心円上になります。
花火5
この繰り返しで、好きな大きさの円を重ねていけば花火の完成です!
花火6
ラインや形の違う楕円を入れたり、色をグラデーションにすると花火っぽくなります。
星を入れてもかわいいかもしれません。

更に町並みを加えるといい感じです。
スクリーンショット 2014-08-07 15.07.27
花火は、夏は特にバナーなど、ちょっとしたところにたくさん使えそうですね!

知ってる?花火の見どころ!

一時期ちょっとだけ打ち上げ花火にハマっていました。
花火競技大会の中継を録画して見ていたり・・・

ご存知のとおり花火にはたくさんの種類があります。
その中でも、芯入り割物という種類があり、これは職人さんの技量が見える種類の花火です。
簡単に言うと、開いたときに光の球が何重になっているのか、同心円上に開いているかなどが見どころです。
ほかにも開くときの高さや消え方など、見るポイントはたくさんあるのですが、まずは、円が何重になっているのかを見てみましょう!
言うまでもなく、重なりが多いほど綺麗に開かせることは難しく、五重になっているものが今のところ最大のようです。

Illustratorだと簡単に整列で同心円上に花火がかけてしまいますが、本物はもちろんそうはいきまんね。そこに全てをかけている職人さん、かっこいいです!ロマンがあります!

最後に

Illustratorで簡単に作れてしまう花火ですが、バナーや広告などにちょっといれるだけで、夏っぽくなったり、楽しい気分にさせてくれたりしますよね。
Illustrator初心者の方でもすぐに作れるので是非試してみてください!
そしてこの夏、五重の花火を見たらきっといいことがあるでしょう!それでは、よい夏を!

手軽に使える便利な firefox のアドオン!

fujie
2014/08/04
閲覧所要時間:約5

はじめまして。こんにちは、藤江です。
4月末にフロンティアビジョンへ入社して、3ヵ月と1週間程になるマークアップエンジニアです。
熊本電子ビジネス専門学校を卒業して佐賀のWeb制作会社で3年3ヶ月従事しておりましたが、
ご縁があって熊本に戻ってきました!
これからよろしくお願い致します。

さて今日はブログ更新担当日ということで、
ご存じ、モダンなブラウザ『Firefox』のマークアップ実務で使えるオススメアドオンのご紹介を致します。

多機能で軽量なカラー情報を取得出来る『ColorZilla』

ColorZilla

ColorZilla :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/colorzilla/


サイト上の色をワンクリックで調べてくれたり、その際にカラーコードをコピーしてくれたり、ブラウザ上でカラーピッカーを表示して色を変更したりなど、とっても便利なアドオンです。
動作も軽量で、画像編集ソフトなど起動しなくてもカラーピッカーを使うことが出来て捗りますよ!

スタイルシートだけ更新出来る『CSS Reloader』

CSS-Reloader

CSS Reloader :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/css-reloader/


ページは更新したくないが、CSSだけ反映させたい場合などに有効なアドオンです。
お問い合わせフォームなどを構築する際に活用します!

モバイルシミュレーター『FireMobileSimulator』

FireMobileSimulator

FireMobileSimulator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/


最近はあまり出番がありませんが、モバイルサイトを気軽に閲覧することが出来るアドオンです。
大まかな制作・確認はシミュレーターで、最終確認は実機で、の様なときには重宝しますね!

サーバーの場所が一目でわかる『Flagfox』

Flagfox

Flagfox :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/flagfox/


ロケーションバーに国旗が追加されます。
そこから右クリックのメニューからwhois情報やIPアドレスのコピーなどが簡単に出来るようになります。

HTML構文が正しいか逐一わかる『Html Validator』

Html-Validator

Html Validator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/html-validator/


ページを表示するたびにチェックしてくれます。
正しければ緑マークにチェックが、
エラーがあれば赤マークに×が、
警告があれば三角アイコンにびっくりマークが表示されます。
また、ページのソースを表示すると、エラーの内容や問題がある場所を示してくれます。

スクリーンショットとものさし代わりにも?『Lightshot』

Lightshot

Lightshot (screenshot tool) :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/lightshot/


該当箇所のスクリーンショットだけ撮って文字などを入れたり出来るアドオンですが、
ピクセル数も表示出来るので、サイト上ものさし代わりとしても利用可能!

リンクチェックを可視化『LinkChecker』

LinkChecker

LinkChecker :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/linkchecker/


リンクを一つひとつ調べるのが大変なときはこのアドオン。
リンクが正しい場合は場合は緑色に、
リンク切れの場合はピンク色に、
アクセスに制限がある場合(Basic認証等)などは黄色になります。

今開いているページを他のブラウザで開く『Open With』

Open-With

Open With :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/open-with/


Firefoxで現在開いているページを、ワンクリックで他のブラウザで開くことが出来ます。
URLをコピーペーストする作業からおさらばです!

ページのソースを比較する『PageDiff』

PageDiff

PageDiff :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/pagediff/


Web上で見ることが出来るページのソースコードを比較することが出来ます。
本番環境と開発環境の差異をさくっと知りたい場合によく使います。

CSSやJavaScript等をお気軽ON・OFF『QuickJava』

QuickJava

QuickJava :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/quickjava/


CSSやJavaScript等をワンクリックでお気軽にON・OFF出来ます。
最近ではトップページにjQueryを使った画像のスライダーが良くありますが、
JavaScriptがOFFの場合は当然動作しません。
そんな時の代替えコンテンツの設置もこのアドオンのおかげで、楽に確認出来ます。

ユーザー独自のスタイルシート『Stylish』

Stylish

Stylish :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/stylish/


サイト上にユーザー独自のスタイルシートを反映することが出来ます。
私は、画像が無い場合良く目立つように、赤背景を出すような使い方をしています。

最後に

いかがでしたでしょうか。
記事を書く前は5・6個ぐらいかな、と思っていましたが終わってみれば11個もありました。
ご紹介したアドオン達に毎日助けられて仕事に励んでいます。
制尺者の方々に感謝!

ありがとうございました。

お次は 手軽に使える便利なブックマークレット! です!

嬉しいご褒美いっぱい!?『ごほうびガチャ』のご紹介。

yamamoto
2014/08/01
閲覧所要時間:約1

こんにちは、ヤマモトです。
蒸し暑い日が続きますね〜。

フロンティアビジョンでは、
今日もスタッフが一生懸命仕事に励んでいます!
その労に報いるため、本日からはじめた取り組みがあります。

仕事中

新登場!その名も『ごほうびガチャ』!!

ごほうびガチャ
懐かしいニオイがプンプンしますね!
お客様の案件をひとつ公開するたびに制作メンバーがそれぞれ1回まわすことができる
というシステムです。
「ごほうびガチャ…」どんなご褒美があるんでしょうか!?(^0^)

では早速、デザイン部部長の河添さん!


なにがでるかな♪なにがでるか…
本気の庭掃除 アップ 大ハズレ
恐ろしい…。(^_^;)
ぜんぜんご褒美じゃない…。
ということで河添さんは明日「本気」の庭掃除をすることになりました。※会社の庭です。

気を取り直して!次はコーディングを担当した藤江さん!


おお!!クオカード1000円分!!
見事アタリです!

クオカード
満足げな表情の藤江さん♪



おわりに

恐ろしい落差のあった今回のごほうびガチャ。
内容は定期的に変わるので、なかなかのスリルが味わえそうですね。
そして、はじめて「大アタリ」を引くのは誰になるのでしょうか!?

以上、新しい取り組み「ごほうびガチャ」のご紹介でした!

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介