STAFFBLOG スタッフブログ

業務で注意している3つのこと【コーディング編】

kawaguchi
2016/12/05
閲覧所要時間:約5

こんにちは、川口です。
今年も早いもので残り一カ月ですね!
一年間どうでしたか?楽しみましたか?

僕は最近 緑仙峡 に紅葉を撮りに行ったのですが色づいた紅葉を見れなかったことが心残りです…
autom-1 現地の方に来るのが一週間遅い!と言われてしまいました 笑
去年も五家荘に行って、満足いく景色を見れなかったのでかなり悔しいです…



年末にかけてだんだん忙しくなってきましたが、
お陰様でありがたいことに1年中忙しい気がしております。

そんな中、コーディングする際とくに注意していることを今回の記事にしたいと思います!
(ブログのネタが無くなってきました 笑)

コーディングで注意している3つのこと

※タイトルには「コーディング編」と書いていますが、コーディング編以外ございません 笑
  • ①テキストに関する情報
  • ②間隔(余白)について
  • ③CSSで表現
 

①テキストに関する情報

textinfoCSSのプロパティーでいうと
① font-size: 36px;
② line-height: 1.667;
③ letter-spacing: .005em; です。

①のfont-sizeはそのまま36pxにすればいいですが、
②と③については少々面倒な計算が必要です。
line-heightの計算方法
line-height = 数値 ÷ フォントサイズ なので
60px ÷ 36px = 1.66666667 です。
letter-spacingの計算方法
letter-spacing = 数値 ÷ 1000 なので
5 ÷ 1000 = 0.005 です。
ですが、毎回手動計算していては効率が悪すぎるので
sass を使用している前提ですが function や mixin で計算するようにします。

@mixin
line-heightの自動計算
@mixin line-height( $psd-size , $font-size ) {
 line-height: $psd-size / $font-size;
}
●leffter-spacingの計算
@mixin letter-spacing( $trakking ) {
 letter-spacing: $trakking / 1000 + em;
}
 

これで早く簡単に計算できるようになります。
他にも確認していることはありますが、計算が必要な部分だけ紹介しました!

 

②間隔(余白)について

次は画像やテキスト、コンテンツの間隔を計算するときにどうしているかです。
どれだけ正確に、PSDとほぼ同じ間隔にするかが結構難しいことだなと最近感じています。
letter この場合 緑の四角 と テキスト の間隔を図る時は 選択範囲ツール を使ってしっかり図ります。
47px と設定したいところですが実際にブラウザで表示すると47px以上の間隔が空いてしまいます。
これはテキストが持つline-height等の間隔 + 47px ということになるのが原因です。
なので少し小さくして35pxなど、あとは目分量で設定するしかなさそう….なのではじめは大体で設定しコーディングしていきます。
そして最終段階で僕が必ずやっていることが、px単位で調整することです。
目分量で正確にするスキルは僕にないので、あるモノを使います。

そのあるモノが、ブラウザを半透明にしてくれる「Afloat」です!
これは ブラウザを半透明にすることができる優れもので ブラウザをPhotoshopの上に直接重ねて細かく調整しています。
これで完璧!
と思ってましたがやはりブラウザで若干違う場合がありますがこれは恐らくスキル不足です..
どんなものかは下の参考リンクをご覧ください。

Afloat参考
http://fatherlog.com/translucent-window-mac-app-afloat/

※ダウンロードページが少々怪しいですが色んな方がブログに掲載されているので大丈夫です 笑

また、Mac OSX El Capitan からAfloatがどうやっても使えないので
代用として「Helium」 を使用しています。
こちらは Helium 自体が簡易ブラウザとなって半透明になりますが、開発者ツールが使えないです…

Helium
https://itunes.apple.com/jp/app/helium/id1054607607?mt=12


一見、作業が遅くなるような気がしますが、特に遅くなった感じはせず、このおかげで目分量の精度が上がった気がします 笑
コーディングとデザインが分業のフロンティアビジョンでは、コーダーが気にならなくてもデザイナーは少し違うと気になると思います。
なので当たり前ですが、 デザインと同じ を心がけてコーディングしています!
(アプリに頼らなくてもできるようになりたい….)

 

③CSSで表現

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-10%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-11 ストライプやドット柄、市松模様のパターンは画像で対応していましたが、CSSで表現可能と分かったのでブラウザの対応は確認しながら最近は使っています。

購入していただいた本
fullsizerender CSSシークレット ―47のテクニックでCSSを自在に操る
http://amzn.asia/8T4ZyVu

にはいろいろテクニックが紹介されていてとても面白いです!(まだ半分くらいしか読めてないです…)

 

マニアックな話になりましたが、いつもコーディングで注意していることを書いてみました。
まだまだ模索中な部分もあるので、他にいい方法があればぜひ教えていただきたいです!
そして来春には新しく社員も増えるので少しでも参考になればいいなと思います。

 

一緒に学ぼう!「著作権」基本のキ。

yamamoto
2016/08/18
閲覧所要時間:約4

image3432184
こんにちは!ヤマモトです。

今回は著作権について取り上げたいと思います。
WEB制作会社としても、必ず知っておくべき話ですし、ブログやSNSが当たり前になった今
知らず知らずのうちに著作権侵害をしていた!…なんてことがないとも限りません。
どなたにも関係ある内容ですので、一緒に学んでいきましょう!

著作権とは?

お絵描き 著作権とは、自らの思想・感情を言語、音楽、絵画、建築、図形、映画、コンピュータプログラムなどの表現形式によって創作的に表現した著作物を保護するための権利のことです。

日本では特許や商標のような権利の申請や表示がなくても、著作物を制作したと同時に著作権が与えられる「無方式主義」を採用しているため、思想や感情を創作的に表現した制作物にはすべてに著作権が発生します。

つまり、「こどもの絵や作文」であっても立派な著作物となります。

著作権にはどんな種類があるの?

著作権には、大きく分けて【著作財産権】と【著作人格権】の2つがあります。
一般に「著作権」として扱われているのは「著作財産権」の方です。

著作財産権とは「著作物で発生する財産権に関する権利」のことです。
著作物を運用していくことによって発生する著作権者の利益を守る役割があります。

主な著作財産権

著作財産権1複製権) 著作物を印刷、写真、複写、録音、録画などの方法によって有形的に再製する権利
上演権・演奏権)著作物を公に上演したり、演奏したりする権利
展示権)美術の著作物と未発行の写真著作物の原作品を公に展示する権利
頒布権)映画の著作物の複製物を販売・貸与する権利
譲渡権)映画以外の著作物の原作品又は複製物を公衆へ譲渡する権利
貸与権)映画以外の著作物の複製物を公衆へ貸与する権利

 

著作人格権の種類

著作人格権公表権)自分の著作物を公表するかしないか、するとすれば、いつ、どのような方法で公表するかを決めることができる権利
氏名表示権)自分の著作物を公表するときに、著作者名を表示するかしないか、するとすれば、実名か変名かを決めることができる権利
同一性保持権)自分の著作物の内容又は題号を自分の意に反して勝手に改変されない権利

※参考・・・公益社団法人 著作権情報センター 「はじめての著作権講座 著作権って何?」

 

WEBデザインに関する著作権

WEB
ここまで、著作権の定義や基本情報についてみてきました。
それでは私たちWEB制作のお仕事で考えたとき、どのように関わってくるでしょうか?

 

制作会社がつくったWebサイトの著作権はだれのもの?

例えクライアント様がお金を払って制作したサイトでも、基本的にはWEBサイトの著作権は作った制作会社側にあります。
※企業に勤めている従業員が制作したものは制作者個人ではなく、企業に著作権が帰属する。

よって、クライアント様側に著作権をうつしたい場合は、著作権の譲渡や利用許諾を取り決める契約書などをかわす必要があります。

 

サイトのレイアウトや配色も参考にしちゃダメなの?

著作権は著作権法 第二条1で
「著作物 思想又は感情を創作的に表現したものであつて、文芸、学術、美術又は音楽の範囲に属するものをいう。」
と定義されており、レイアウトは「創作的に表現」したものではなく、「アイディア、手法」と解釈されます。
手法(技法)ですので、たとえレイアウトを真似したとしても著作権侵害にはなりません。
配色についても同じで、真似しても問題ありません。
※すべて丸ごと真似してしまってはもちろんダメです。あくまでも参考にとどめておきましょう。

 

キャッチコピー(標語、キャッチフレーズ)は著作物?

基本的には著作物ではないと考えられます。
ただし、キャッチコピー(標語、キャッチフレーズ)とっても様々な内容がありますので中には著作物といえるものも存在します。
キャッチコピーは短い表現のため、著作物として認められるためのハードルが高くなります。
よっぽど「思想や感情の表現」「創作的な表現」が含まれるものであれば、著作物として認められる場合はあります。
いずれにしても個別的検討が必要になってきます。

 

人の写真をトレースして使っていいの?

著作権が発生している写真をイラスト化したりすると、「複製行為」にあたり、上記でも記述した「複製権」侵害になります。
写真を元にトレースする場合は、自分で撮影した写真、または著作権に問題の無い写真を利用しましょう。

 

まとめ

以上、著作権の基本的な内容をご紹介しました。
さらに詳しく著作権について知りたい方は著作権情報センター(CRIC)のサイトで
著作権について分かりやすくまとめてあるパンフレットが閲覧できるのでおすすめです。

著作権情報センター(CRIC)
http://www.cric.or.jp/publication/pamphlet/index.html


自分もまだ、完全には理解できていないのですが、自分達の仕事・生活・文化に関わることなので
引き続き勉強していきたいと思います!

それではまた!

ウェブは5年ひと昔ではなく5年ひと時代みたいです。

井上武明
2016/07/15
閲覧所要時間:約6

ポケモンGOがアメリカで大フィーバー!!
今日がファミコン発売開始日らしいので日本解禁を期待していました・・・まだみたいですね。

『Pokémon GO』公式サイト
http://www.pokemon.co.jp/ex/PokemonGO/


そんな今日誕生日のファミコンが発売された1983年をインターネットの歴史で見ると


1983年のインターネット

  • 学術研究と軍事技術に作られていたものが分離
  • TCP/IPが標準プロトコルとして採用
  • IPv4アドレスが使われるようになり
  • DNSが誕生

出典:インターネット歴史年表 – JPNIC / 【1983年】


だそうで、つまりインターネット誕生前のようです。

そんな事を考えてたら大学で建築学を学んでいたためか、1年ほど前のウェブデザインの進化の過程を西洋建築史になぞらえた記事の事を思い出しました。

この記事ではウェブデザインと建築は以下の4つの共通点があるとし、その共通点から西洋建築史からウェブデザインの歴史を分析しています。


ウェブデザインと西洋建築史の共通点

  1. 人が集まる場所として機能する
  2. 実用的に作られている
  3. 技術の進歩に大きく左右される
  4. 実用的だが、間違いなくアートでもある

出典:建築史に隠されたウェブデザインの未来 — Japanese Official — Medium



詳しくは実際のページを参考にしてもらうとして、ウェブデザインは約5年程度のサイクルで西洋建築史における一つの時代に相当する変化が起こっているみたいです。

ウェブの新石器時代(1990〜1995年頃)

テキストとハイパーリンクしか扱えなかった最も古い時代

世界最初のウェブサイト
上は世界最初のウェブサイト info.cern.ch の画面です。
現在は復刻版として公開されています。

世界最初のウェブサイト info.cern.ch
http://info.cern.ch/hypertext/WWW/TheProject.html


ちなみに日本で最初のウェブサイトは1992年9月30日で文部省高エネルギー加速器研究機構 計算科学センターの森田洋平博士によって発信されたものだそうです。
こちらも復刻版として公開されています。

日本で最初のウェブサイト
http://www.ibarakiken.gr.jp/www/


さすがに新石器時代だとオタクというよりも研究者の世界ですね。
この当時もパソコンは存在してパソコン通信と呼ばれるサービスがありました。(やったことはありません)
パソコン通信はインターネットとはちょっと違いますがデザイン的には同じようなものだったようです。

ウェブの古典建築時代(1996〜2000年頃)

要素や構造が整理され、小さな画像がいくつか利用できる程度の時代

通常の電話回線を使ってインターネット接続するダイヤルアップで、遅い通信速度しかなかった時代ですね。
小さな画像1枚を表示するにも数秒〜数十秒待たされて、本当に重要なところにだけ画像が使われていました。

YAHOO! JAPANがスタートしたのが1996年で、冒頭の話題となったポケットモンスターも初代発売が同じ1996年。(同級生!)
その頃のページはインターネット・アーカイブで見ることができます。

1996年11月20日のYAHOO! JAPAN
http://web.archive.org/web/19961120065342/http://www03.yahoo.co.jp/


ソースコードを見るとgif画像が4枚しかなく、それぐらいしか使えない時代ですね。

ちなみに私がインターネットを初めて知ったのが1999年頃。
当時はパソコンではなくドリームキャストでネットサーフィン(←死語)していたオールドタイプです。

ウェブのロマネスク建築時代(2001〜2005年頃)

画像が多く利用できるようになり、質感が表現され始めた時代

ADSLなどブロードバンド化の恩恵で多数の画像を使っても大丈夫になり、カラフルになってきました。
とりあえずホームページを持ちたいブームで、ホームページ・ビルダー風味満載の原色系ウェブサイトがいっぱいありました。

印刷物などは基本的にプロが作ったものを通常目にしますが、この頃のウェブサイトを見てると「配色センスが大切」と感ますね。

ちなみにガラケーのiモードなどもこの頃からです。
当時は絵文字で文字化けとかよく聞きました。

ウェブのゴシック建築時代(2006〜2010年頃)

Flashブームでそれまで不可能だったアニメーションや過剰な装飾が好まれた時代

Flashだけで作られたページが本当に多くありました。
無駄に凄いアニメーションのFlashサイトが大人気でした。
Flashで動画再生が出来るようになりYouTubeもこの頃生まれました。

\\  !! Flash大人気 !! //

そして2010年4月、ジョブズが「iPhoneでFlashをサポートしない(使わせない)」と宣言。

Flashは一気に衰退していきます。

ちなみにこの時代にGoogleMAPが登場し、それまで嫌われていたJavaScriptがAjaxの流行と共に見直され始めます。
jQueryが登場し、それまでFlashでしかできなかった事ができるようになりました。

昔のJavaScriptは「いらない子」扱いだったんですよ。

特にFlashはその中でしか動作させられませんが、jQueryはウェブページ全体で離れた場所でも動作させられるのが特徴です。
今では当たり前のタブ表示やアコーディオン処理、画像をクリックすると大きな画像を表示させるliteboxなどが生まれました。

JavaScriptの復活(?)です。

ウェブのルネサンス建築時代(2011〜2015年頃)

過剰な装飾の反動から基本に立ち返ってシンプルでスッキリとしたものが好まれる時代

この時代最大の要素はスマートフォンの急速な普及ですね。

初期のスマートフォンサイトといえばiモードと同程度の感覚で情報を絞り込んで表示させる感覚でしたが、すぐにパソコンと同程度の情報が求められるようになり、それに対応するための方法として「レスポンシブサイト」の考えが登場します。

しかし、レスポンシブサイトは画面の大きさに応じてレイアウトが変わるので完成形がイメージしにくいのが欠点ですよね。
その解決案として「とりあえず動くもの」を用意してデザインを確認しながら作る手法が登場してきましたが、これってデザイン能力とコーディング能力の双方が必要になるので制作サイドで必要とされる能力がまた上がったなぁと感じます。

ウェブのバロック建築時代(2016〜2020年頃)

シンプルさにあきてルールを壊し、複雑化してくる時代?

さて、現在は西洋建築史で言うところのバロック時代初頭にあたりますが、どんな風にルールが壊されて複雑化していくんでしょうか?

今やスマートフォンも高性能・大画面化して動画や複雑な処理も可能になってきています。

以前はFlashやJavaScriptでしかできなかったアニメーション処理もCSSだけで実現できるようになり始めていますし、SVGやWebフォントなども普及し始めています。

そして制作サイドはますます勉強が必要です。(泣)

次の次代に向けて今後ルネサンス時代を作ったスマートフォン級の影響力を与えるかもしれないのがARとVRでしょうか。
ちょうど今話題のポケモンGoは一つの転換期になるかも?

ウェブの新古典主義建築時代(2021〜2025年頃)

古典的なデザインを再評価し始めてレトロが好まれる時代?

本格的なVRを実現するには今のパソコンやスマートフォンの能力では厳しく、現在だとマインクラフト程度の映像が現実的なラインでしょうが、5年後には大きく進歩してくるんでしょう。

その頃には人工知能のサポートでもう少し制作しやすくなる事を期待しますが、おそらく人工知能をうまく使うための勉強などでパソコンの前に座って苦労していそうです。

ちなみに・・・

ポケモンGoを楽しみにしていますが実はポケモンはクリアするまで遊んだことはありません。

自社サイトをレスポンシブウェブデザイン対応しました!

fujie
2015/06/01
閲覧所要時間:約5

gyazo-1
先々月…自社サイトをレスポンシブウェブデザイン対応致しました。
やったのは Googleが勧告していたスマホ対応による順位の変動(4/21)の直前の19日!

結局特に変わりませんでしたが…。

というのも一度はそのアップデートを適用したものの、
日本のサイトのスマホ対応率があまりにも低すぎるので取りやめたというお話を
この間開催されたWebパフォーマンスのセミナーでお伺いしました。

以下、今回やったことを振り返ってみようと思います。


まずは現状を知る

レスポンシブウェブデザイン対応をする前に、まずはその時の現状を確認しました。
  • 1年前にPCサイトをリニューアル
  • 画像はすべて通常サイズ
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
  • 横に長い画像が主要なページにいくつもある
  • ヘッダーが追従する
  • グローバルナビゲーションの中にプルダウンメニューがある
等という特徴があります。

また今回の取り決めとして、
求人案内とスタッフ紹介のページはまったくデザインが異なるので、
一度に行わないことにしました。(時間があればコソコソやります…)


現状を維持しつつ、レスポンシブ時の時の動作を決める

現状の仕様がざっくりと整理できたので、
ブラウザ幅を縮めていった時の動作を考えていきます。
  • 1年前にPCサイトをリニューアル
    → 既に形があるので、必然的にPCファースト(960px)
    → メディアクエリーでレスポンシブスタイルを制定
  • 画像はすべて通常サイズ
    → ロゴのみRetinaディスプレイに対応させる
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
    → PCでブラウザ幅を縮めていった時にはそのまま何もしない
  • 横に長い画像が主要なページにいくつもある
    → 画像は基本 max-width: 100%; で対応するが、横に長い画像は縦が細くなってしまうので、通常の画像と違うスタイルを制定する
  • ヘッダーが追従する
    → 追従をやめて、右上にハンバーガーアイコンを設置する
  • グローバルナビゲーションの中にプルダウンメニューがある
    → プルダウン動作をやめて、右上のハンバーガーメニュー内で展開されるようにする
という動作を決めました。
グローバルナビゲーションですが、ドロワーメニューとかハンバーガーメニューなどなど人によって言い方がまちまちですが、ここではハンバーガーメニューと言うことにします。


レスポンシブウェブデザインを作っていこう

それでは決めた仕様で作っていきます。

ブレイクポイントをどこにするか

PCサイトを 960px で構築しているため、
どこかの値でブレイクポイントを決める必要があります。

iPad縦持ちサイズからレスポンシブウェブデザインを適用したかったので、
768px を基本のブレイクポイントにしております。

これで、横持ちだとPCのデザイン、縦持ちだとレスポンシブウェブデザインが楽しめるので
私個人的には気に入っております。

(追記:2015年6月13日)
と思っていたのですが、
いろいろ思うところがあって 960px 未満からにすることにしました。


ロゴのみ Retinaディスプレイに対応させる

1倍画像


2倍画像


ロゴのみ高解像度ディスプレイでもぼやけないように2倍の画像を用意し、
高解像度ディスプレイにはそれ用のメディアクエリーで変更しています。

横に長い画像でも美しく

レスポンシブウェブデザインでは画像に対して何もスタイルを指定をしないと
ブラウザサイズからはみ出してしまいます。

そのために画像へ、

/* CSS */
img {
height: auto;
max-width: 100%;
}

というスタイルを一般的に指定します。

このスタイルによって下記のような横長い画像も、
ブラウザサイズの伸縮と合わせて可変するのですが、

こちらの画像だと縦が細長くなって見栄えがよろしくありません。

そこで

/* CSS */
.over-image {
overflow: hidden;
}
.over-image img {
margin-left: -25%;
max-width: 150%;
}

と、横幅の最大値を大きく取り、少しずらすことによって

この様に両端を若干隠すことになりますが、
全体のバランスを崩すことなくレイアウトが出来ました。

表示領域を確保するためにヘッダーの追従を無効に

私がついこの間までiPhone4ユーザーということもあってスマートフォンサイズにて領域を確保することに意識をおいて制作にあたりました。

しかし今は nexus6 を使用しておりかなり余裕があるので、
今後は追従などの手を加えてもいいのかなと思いました。

また上にスワイプするとヘッダーがスッと出てくるのも気になっているので、
そういうこともどんどんやっていけたらな…。

プルダウンメニューはハンバーガーメニューの中で展開させる

今回はプルダウンの中身が少ないので、隠さずに展開させた状態にしました。
メニューの数が多ければ、カテゴリーをクリック後表示非表示させるなどの手法も考えました。

そのあたりでとても参考になるのが、
トヨタ自動車さん
http://toyota.jp/

のサイトが上手く設計されていると思います。


まとめ

以上、弊社自社サイトのレスポンシブウェブデザイン対応でした。

私が担当した案件で恐らく1年半ぶりの4件目の
レスポンシブウェブデザイン対応だったと思います。

今回はワンカラムでスッキリシンプルなデザインでしたので、
制作時間もそこそこ少なめで出来たので良かったかなと思っています。

しかし冒頭にも申し上げましたが実は Googleスマホ対応の直前に急ぎ足で制作してしまったので、
細かいところで行き届いていなかったり、モバイルファーストになかなか踏み込めなかったり(IE8への対応がまだまだあるので当分難しいかも…)するのでもっと色々と考えて出来るようになりたいと思っています。

わかりやすいアイコン

murakawa
2014/11/04
閲覧所要時間:約2

んちゃ!最近メガネキャラになるのを恐れている村川です。

2日程前から、ぐっと寒くなりましたね。
寒さと空腹に弱い私には、つらい季節がやってきました

3連休で、「そろそろセーターを出すか〜」って感じで衣替えをしたのですが、
わ、おひなさまの臭いがする〜(*_*)

セーターってどうやって洗濯していますか??
洋服に付いているタグを見てみましょう!

洗濯マーク

手洗いOK、漂白はだめ、ドライクリーニングOK
家事にうとい私でも、見たらなんとなくわかります。
(手洗いの30は液温限度30℃という意味らしい。知らなかった・・・)

このおなじみのマークですが、今後変わっちゃうらしいんです!

クイズ!これってどういう意味だ!?


今後新しくなる洗濯のマーク。
それぞれどういう意味なのかわかりますか〜?

新洗濯マーク

答えは左から
  • 平干しがよい
  • 普通操作で業者のウェットクリーニング可能
  • 吊り干しがよい
  • すべての漂白剤で漂白可能
  • 普通の温度設定でタンブル乾燥可能
  • です!!

    答え聞いてもなんかピンとこない!
    ちなみに、もちろん私はひとつもわかりませんでした(笑)
    こんな感じのがたくさんあります。全41種らしいです。

    詳しくはこちら↓
    『新しい「洗濯絵表示」がわかりにくいと話題……アイコンを変えるのはなぜ?』

    まだ、いつから変わるのかは未定ですが、お洗濯が苦手になりそうですね(T_T)
    せめてヒントだけでも・・・と言いたくなってしまいます


    「わかりやすいアイコン」と「わかりにくいアイコン」

    web上で「初心者の方へ」というボタンがあったとしたら、初心者マークを使うことがよくあると思います。当たり前ですが、文字を読まなくても「初心者マーク=初心者」と一瞬で判断できます。
    初心者マーク

    一方、スマホを使い始めたばかりのとき、わかりにくかったのがこのアイコンです。
    名称未設定-1
    「共有」のアイコンです。
    アイコンのみテキスト無しでした。
    わからないの私だけでしょうか・・?
    機種によってはこのマークの横に「共有」のテキストが載せてあるみたいですが、これはテキストないとわかんないでしょ〜!

    さいごに

    すごく当たり前のことですが、見ただけでわからないアイコンにはちょっとしたテキストを載せてもらえると嬉しいですね!
    私もつい「このくらいわかるだろう!」と思いがちですが、気をつけようと思いますm(__)m

    フォントの話。

    hashimoto
    2014/10/27
    閲覧所要時間:約2

    top

    こんにちは橋本です。

    この前、とある勉強会でフォント山手線ゲームをしました。

    以外と出てこないもので、自分の口から出てくるのは日本語のクセあるフォント名ばかり。。。

    唯一、口から出てきた欧文フォント名は「Helvetica」でした。

    ふぉんと。ふぉんと。


    Helveticaとロゴの話

    00

    「Helvetica」は有名フォントです。

    「世界中のデザイナーに愛されるデザイナーフォントと言えばやっぱりHelveticaですよね」

    出典:今更聞けない?!WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋

    とも言われています。

     

    有名会社のロゴ、Panasonic、BMW、TOYOTA、Nestleなどなど世界中の企業が使用しています。

    色々と検索して見てみると、同じHelveticaのフォントでもアレンジしているので違ったように見えますねー。

    また企業ロゴが好きすぎて(?)制作された「企業ロゴだけでできたアニメーション作品」などもあります!

    03

    ロゴがゴロゴロ!いったいいくつあるのか、、あの有名キャラクターも登場します。

    ですが、ブラックジョークが効いてますので、いい子は観ないでください!!


    カーニング(文字詰め)の話

    07

    カーニング(文字詰め)とは文字と文字の間隔(空白)を調節する技法のことです。これをすることによって、文字のバランスがよくなり、見やすくなります!

     

    下の画像を見てみましょう。赤がカーニングする前の文字、青がカーニングした後の文字です。

    どうですか?青のほうが見やすくありませんか?わかりませんか?

    01

    重ねてみるとこんなにも違います!

    02

    カーニングを練習できるサイトもあります!!(先輩から教えてもらいました)

     

    04

    KERNTYPE

    これが以外と難しい・・・遊びながら学び感覚を研ぎ澄ましましょう!

     

    好きなフォント

    06

    あなたはどんなフォントが好きですか?

    私はレトロな日本語フォントが好きです!

    このサイト『のらもじ発見プロジェクト』のサイトを見たときには、高ぶりました!!

    05

    試し組みもでき、ダウンロード可能。商店街も大好きなので、とてもお気に入りのサイトです!


    さいごに

    街中いろんなところにフォントはあります。散歩でもしながらフォントを勉強してみるのも楽しいかもしれません。私も気に入ったフォントを見つけた時は写真を撮っています♪

    ムードボードを使ってイメージを固めよう!

    murakawa
    2014/10/02
    閲覧所要時間:約3

    こんにちは。
    ドライアイ村川です。

    10月に入り、さすがに朝方、夕方はちょっと肌寒くなってきましたね。

    秋物の服が欲しいな〜
    かわいくて、でもちょっと大人っぽくて、秋だし色は暗めがいいかもしれない。
    ついでに、お腹が苦しくないやつね!
    さ、私に似合う服選んでもらえます??


    服を着た犬
    さて、どんな服を想像しましたか?
    私が欲しい、私が想像した服と、皆さんが想像した服はちょっと違ったかもしれませんね!
    当たり前です。「かわいい」とか、ざっくりした言葉の捉え方は様々です。
    それに、なんてったって自分でもどんな服が欲しいか、はっきりわかってないのですから!!

    自分が想像しているものを言葉や形にするのって、とっても難しい!
    ということで「ムードボード」というものを使ってみましょう。

    ムードボードとは?

    自分が「こんな感じにしたい」と思うものに近い画像を一つのボードにたくさん集めたもののこと。
    ※画像検索「ムードボード」でいっぱい出てきます。
    webデザインをしていて、お客さまのイメージと自分のイメージに差があると、もちろんお客さまの気に入るデザインはできません。う・・・反省(__)
    試しに自分でテーマを設定して、テーマにあったムードボードを作ってみました。

    テーマ:「女性クリニック」のサイト
    キーワード:若い女性向け、優しい、落ち着いた、おしゃれ、明るい

    ムードボード
    なんか植物が多い!
    無意識ですが「優しい・落ち着いた」→「リラックスできる」→「植物」に私の脳内で結びついたようです。

    ムードボードを作ってみた結果、最初のキーワード(若い女性向け、優しい、落ち着いた、おしゃれ、明るい)から、関連したキーワードが見えてきました。
    例えば、「シンプルだけど華やかさがある」「落ち着いているけど、かわいらしさがある」「(女性や木漏れ日の写真から)明るくて希望をもてる感じ」など・・
    言葉にしづらい微妙なニュアンスが少しわかりやすくなったような

    ムードボードを元に考える

    ムードボード内から色を選んでみた。

    色

    ムードボードに合うフォントを選んでみた。

    フォント


    ムードボードに合うタイトルバー作ってみた。

    バナー

    最後に

    ムードボードを作ったのは初めてでしたが、やってるうちに「こういうの取り入れてもいいかも!」と発見できたり、イメージが固まっていくのがおもしろかったです。

    なんと、ムードボードを作成するためのアプリがあります
    Adobe「College」(有料)
    Adobe「College」
    他にも、無料でムードボードを作成するサイトもあります。

    ですが、白い紙を用意して、雑誌を切り抜いたり、絵を描いてみたりすれば、誰でも簡単にできます!
    ただイメージを固めるだけなので、センスなど関係なく思うままに紙を埋めてみましょう!
    楽しいです!!

    簡単に夏っぽいバナーを作ってみよう!

    nishikawa
    2014/07/25
    閲覧所要時間:約2

    02
    こんにちは、西川です。
    熊本は梅雨が明けてから毎日が夏いです!
    入道雲がもくもくしているのを見ると阿蘇や天草にお出かけしたくなりますね〜〜

    さて、今回はそんな入道雲を使って夏っぽいバナーをササッと作る方法をご紹介したいと思います!

    いい感じの入道雲の画像を探す

    02
    今回はこんな感じの写真を使おうと思います。
    この雲の白い部分だけを取り出して、青空に合成して夏っぽさを手軽に演出する、という流れになります。
    ちなみにこの写真をそのまま使わず、雲の切り抜きを使うメリットはご覧の通りです

    ●雲の位置を自在に調整できる
    ●好きな空の色が使える
    ●他の入道雲との組み合わせが簡単

    ひとつあると便利なので、下記手順を参考にしてぜひ作ってみて下さい!

     

    入道雲を白い部分だけ切り抜く

    長方形選択ツールで必要な部分だけを残して切り抜く

    03
    雲の部分だけが欲しいので、それ以外はザックリ削除してしまいます。

     

    チャンネルパネルで「レッド」チャンネルをコピーする

    03
    チャンネルパネルの中から、空と雲のコントラストが一番高いものを選んでコピーします

     

    トーンカーブで黒いスポイトを選択し、背景の色が一番薄い箇所をクリック

    09
    クリックした箇所の色が黒になるように補正されます。これで背景の空の部分が真っ黒になりました。

     

    コピーしたチャンネルのサムネイルをCommand(ctrl)を押しながらクリックする

    09
    これで「黒」以外の「灰色」〜「白」の部分が選択されます。

     

    新しいレイヤーを作って、描画色を白にし「Alt」+「Delete」で選択範囲を塗りつぶす

    09
    入道雲の白い部分だけ抜き出せました!
    あとは雲レイヤーの後ろに分かりやすく色を置いて、雲レイヤーをコピーしてお好みで入道雲の濃さを調整します。
    これで入道雲だけのパーツができました。ここで一旦保存しましょう。

     

    早速入道雲を使って夏っぽいバナーを作る!

    09
    新しくファイルを作って、空っぽいグラデーションをかけます。
    さわやか水色空でも、濃〜い青空でも、何でもOK!

     

    あとはお好みの夏っぽいパーツをレイアウトして、できあがり!

    01
    夏なので、お中元バナーを作ってみました。
    いい感じの雲をどこにでも配置できるのは、やっぱり便利です!

    いくつか入道雲のパターンを作っておくとあらゆるレイアウトに対応できるかも!?
    皆さんも、お気に入りの入道雲deデザインライフをお楽しみ下さい〜〜〜

    Web制作会社年鑑2014に掲載されました!

    渡邉 直登
    2014/07/22
    閲覧所要時間:約2

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

    あまりに社長ブログを更新しないため、スタッフ主導により
    こちらのスタッフブログに私も投稿していく当番が決定した次第です。
    こういうのはやはり強制的な当番にするのが一番ですね^^;

    Web制作会社年鑑2014に掲載!

    最近、とても嬉しいことがありました!
    WEB制作会社ならほぼ年間購読しているであろう、「Web Designing」という
    業界向け雑誌があるのですが、そちらが年に1回発行している
    Web制作会社年鑑2014にフロンティアビジョンが掲載されました~♪
    WEB制作会社年鑑2014

    熊本のWEB制作会社では2社。九州でもたった4社だけ

    いやー、なんか嬉しいですね!
    しかも蒼々たる制作会社さんと同列に扱ってもらってありがたいです。

    WEBデザイナーではない私としてもこの掲載にはとても感慨深いものがあります。
    こういうやり方もWEB制作会社としてはあるんだぜって所を見せれた感じ。
    フロンティアビジョン株式会社の掲載箇所
    ↑こんな感じで1Pで大きく掲載されています。

    これもひとえに、よい社員とよいお客さまに恵まれたおかげです!

    まだまだ僕らは成長が始まったばかり。これからガンガンいける。
    そんなムードを感じさせてくれる出来事でした。

    デザインは「制作時間」をかけて、こだわればこだわるほど良くなる確率は上がります。
    しかし、制作時間をかければかけるだけ、制作費用に転換せざるを得ないビジネスモデルです。

    そういう制約の中で、いかに費用対効果&お客さま満足度を上げれるかに
    チャレンジしているスタイルなのでどうしても高予算案件を持つ他社とは
    「つくりかた」が違うのですが、可能な限りよい品質のものを作るという
    目標を掲げ、またこの本に掲載してもらえるような制作を続けていきたいですね!

    やっぱり全国となると本当にレベル高い!
    僕らのベクトルは、日本一の制作実績数(公開数)を目指すので
    少々方向性は違う部分もありますが、全てがライバルでもあります。

    熊本から全国へ、頑張らないとですね!

    4800円(税抜)もしますが、ご興味のある方はAmazonでも売ってます。

    それと、フロンティアビジョンでは、上記目標を達成するために
    WEB制作業界経験者の中途採用を常時募集することにしております。
    ご応募を心よりお待ちしております!

    「やさしいハンカチ展」に行ってきました

    2013/03/06
    閲覧所要時間:約1

    やさしいハンカチ

    きよながです。

    3月3日に熊本は花畑町の崇城大学ギャラリーで開催していた「やさしいハンカチ展」に行きました。
    (※熊本展示は3月3日で終了しています)

    価格案内やイベントの沿革もハンカチと同じ生地に印刷して掲示していたあたりが JAGDA(日本グラフィックデザイナー協会)主催の企画らしいなぁと。

    各作品には原画を描いた子どもの名前と、ペアになったデザイナーの名前があり、知人の作品を探しつつ全385作品、ひとつひとつをじっくり眺めて、2枚購入しました。

    日曜で最終日なのに来場者が少ないのがちょっと気になりました。
    スタッフの方と話してみると、全体を通して少なかったそうです。

    私も東京の知人から教えてもらわなければ、多分このイベント自体を知らないままだだったので、PRの問題なのかなぁと。う〜ん、難しいですね。

    他の地域はまだまだ巡回予定があります。近隣にお住まいの方はぜひ足を運んでみてください!

    【関連サイト】
    JAGDA – やさしいハンカチ展 Part 2

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

    デンタルWEB

    求人情報

    スタッフ紹介