ブログ更新担当日のちょうど前日に「HTML5が正式勧告」と、
いい感じにブログネタが手に入って喜んでいる藤江です。

個人的には2年くらい前から、HTML5のDOCTYPE宣言と使いやすい主要なタグ（header、footer、section、article、navなど）を、案件によってはこっそり（弊社自社サイトも）と使い続けてきましたが、これからはバリバリ使っていけそうですね！

• ソースの見た目がすっきり
• より文書構造が明確になる（SEOの内部対策にも！）
• JavaScriptと組み合わせることによってFlashや画像でしか出来なかった表現が可能に
• フォームやaタグの改善によりユーザビリティの向上と、制作者にも優しくなる

一瞬で思いついたものを書いてみました！
まだまだマダマダあると思います。


さて私が以前から、または最近参考にしている HTML5でマークアップされて参考になるサイト様をいくつかご紹介したいと思います。

個人 – Yahoo!ニュース
http://bylines.news.yahoo.co.jp/

本サイトやその他サービスはまだHTML4だったりXHTML等ですが Yahoo!ニュースの個人、Buzz、意識調査のカテゴリーではHTML5でマークアップされておりました！（2014年10月30日調べ）
いったい何時ごろから変わっていたのでしょう。今日改めて見てみて発見したのですが、全然気づきませんでした！
細かい所でnav、time、figure等でマークアップされており、また全体的にもsection、articleの使い方が勉強になると思います。

Apple – iPhone – モデルを比較する
https://www.apple.com/jp/iphone/compare/

AppleのサイトのiPhone比較のページです。
最近になってついにレスポンシブ対応をなされて話題になりましたね！
そこで気になったのがfigureの使い方です。

ソースを見てみると、なんとfigureの中は何も空！
代替えテキストも入れずに堂々とタグの中身は空白で、背景画像を駆使して描画している斬新なマークアップです。

レスポンシブ面ではメディアクエリーの力によって簡単に画像を変更できる点から採用されているのでしょうが、こういったマークアップもありなのでしょうか…！
といったご紹介まで。

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、<figcaption>タグを使用します。

ピクセルグリッド
http://www.pxgrid.com/

スタッフの方たちが技術面で何かしらアウトプット出来る場（ブログや執筆など）を持っていらっしゃる方ばかりで、サイトのソースが非常に勉強になります。
特徴なのはスタイル目的でIDを使用していない事！　classのみ、しかもハイフン繋ぎできちんと統一されているのでとても見やすいです。
僕も真似して比較的新しい案件からはそうしているのですが、IDかclassか？で迷わなくなったり、統一されているのでCSSのメンテナンスが楽になりました。

ミツエーリンクス
http://www.mitsue.co.jp/

サイトのメインコンテンツとなる要素を大きくmainで囲い、sectionの中には必ずhx（h1、h2など）を入れるなど厳格なマークアップをされています。
W3Cチェックでもエラー無しのページばかり！　また早い段階でレスポンシブデザインに対応し、印刷用のCSSもきちんと考えられていてサイトのソースからはとても勉強になります。

フロンティアビジョン
https://www.fvs-net.co.jp/

ここでまさかの自社サイト…！！
弊社も頑張って約半年前（2014年7月7日）にHTML5で自社サイトをマークアップ致しました。
とはいっても…HTML5の要素は有名で基本的なものばかりの使用と、IDやclassが混在していたりちょっとお見苦しいのですが（こっそり修正していく所存…）、
「熊本 ホームページ制作」の検索1位という結果に恥じぬよう構築したつもりですので、参考になる部分があれば幸いでございます。


なにはともあれ、HTMLは一つの節目を迎えた、ということですね。
HTMLしかりCSSしかりJavascriptやPHP等々…フロントエンド周りの近頃は本当に考えたり覚えたり、やることがどんどん増えてきている感じがします。

新しい技術や仕組みに、おいて行かれないように、
じゃんじゃんばりばり試して作って見せたりして行きたいです！

ではまた！

こんにちは橋本です。

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

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

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

ふぉんと。ふぉんと。

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

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

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

とも言われています。

 

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

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

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

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

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

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

 

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

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

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

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

 

KERNTYPE

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

 

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

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

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

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

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

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

今年の秋は、快晴続きで気持ちがいいですね！最高です！
最近食欲が凄いあります。毎年、冬は２，３ｋｇほど体重が増加し、顔が太るので
よく「渡邉くん、太った？」と言われます。

食べ物がおいしいんだもん、しょうがないですよ。

前回に引き続き、Facebookネタです。
Facebookをされている方であれば、自然と広告が目に付きます。
ついついクリックしてしまった経験、あるんじゃないでしょうか？
私もよく利用します。

１．画像にインパクトがある
２．キャッチコピーや説明文章が分かりやすい
３．自分にマッチした興味がある広告が表示される
４．友達が「いいね！」していて気になる（特によい情報に「いいね！」する人を参考）
５．アプリ版の広告はスライドしやすくなんか見やすい

１と２はプロの仕事だとよりよくなります。
他の３から５はFacebookが勝手にやってくれます。

Facebook広告ガイドもありますので簡単に作り方が分かります。

Facebookへの広告掲載はこのページから簡単に行えます。

広告掲載では例えば広告の届く範囲を詳細に設定が出来ます。
無駄のない広告を入稿できます！

気になる広告費用を見てみましょう！
この条件は、自社サイトに誘導する広告のケースです。
表示は何回でも無料だけど、クリックされたら1回○○円ね、という条件だと
大体50円ぐらいで1ユーザーを自社サイトに誘導できます。


あと、Facebookには1000回表示されたら○○円ね、という条件もあります！これは面白い。

キャッチコピーや説明文章、バナー画像に自信があるならこちらの方が安く集客できるかもしれませんね！

集客の計算は結構シンプルです。
月間5万円の予算をかけると
50000÷50×(0.01～0.05）=獲得件数
熊本県人1000人に指定のページを見てもらい、そのページからアクションさせる率1%～5%。

１%なら10人、5%なら50人。この数値がビジネス的に合うかどうか。後は経営判断になります。
このような予測が出来るのがWEB広告の醍醐味ですね！

いいね！獲得すると、定期的にいいね！してくれたユーザーと
接点を持つことが出来ます。この投稿で、ユーザーが為になるような
情報を配信していくことで、ファンになったりします（エンゲージメントを強くするともいいます）。
この投稿は無料ですので、接点を持ち放題！たまに、広告的な投稿で売上もUP出来ます。

タイトルにも入れましたが、地方においてはまだまだFacebook広告を出している企業数が少ないです。
リスティング広告の歴史でもそうだったのですが、どんどん広告費は上がっていきます。
それは効果があるからです。効果があるからどんどん値段がつり上がっていきます。

Facebook広告は今最もスマートフォン上の広告に強いです。
これからはスマートフォンが中心の時代。
スマートフォン向けの接点を作るのが最重要となると、Facebook広告アツイ！になります。

同業他社がまだ気がついていないうちに、Facebook広告で1歩リードしておくことを
おすすめしたいと思います。

といいつつ、実は弊社が自社集客目的でのFacebook広告を出していないので
次回のブログ投稿までにFacebook広告を出して状況報告をしたいと思います。

こんにちは、最近ぽっこりおなかが気になり出したヤマモトです。
この秋、さらに太ってしまいそうな予感…。

さて今回は、写真が「どのようなライティング」で撮られたのかが分かるサイト
STROBOXのご紹介です！

storoboxは、写真とその撮影時のライティング構成、配置を教えてくれるサイトです。
写真を見ていて「これって、どうやって撮ったんだろう!?」と思うことありますよね？
そのネタバラし的な感じで、撮影時のライティング構成を図で分かりやすく表示してくれます。

まずは、気になる写真をクリックします。
（上の写真のような光物は撮影の難易度が高いですよね・・・）

すると、上の図のようにストロボやレフ板の位置を図解したイラストが表示されます。
またそれだけでなく、【シャッター速度】【f値】【ISO感度】【焦点距離】【露出補正】など
撮影時の細かいカメラの設定までわかってしまいます！！

この情報を元に撮影・練習することでプロの写真に、ちょこっとでも近づくことができるのではないでしょうか!

図は２次元なので正確な配置構成が分からないですし、撮影ではその他の要素も加わってくるので
この情報だけで全て上手くいくわけではないと思いますが、
本や独学で写真を学んでいる人にとっては、なかなか参考になるサイトだと思いますよ！

撮影されない方も、こんな風に撮影しているんだ！という驚きと発見があると思うので
ぜひ一度見てみて下さい！

それではまた。

こんにちはー、画像レタッチ好きなカワゾエ(@zoe)です。今回は「商用でも無料で使える建築パース素材」のご紹介です。

建築パース.comさんでは建築パース作成に役立つ素材を無料でダウンロードできます。psd形式やpng形式などで配布されており、切り抜き済みの素材もあるため非常に使いやすいです。更に解像度も印刷に使用できるサイズです。
これが無料で利用できるっていうのは有り難いですね！

建物の外観写真を使用するときに「写っている余計なものはカットしてほしい」という要望をいただくことが少なくありません。時には具体的な要望は無いけど「なんか良い感じにしてほしい」というザックリとした要望も（笑）
ということで今回は建築パースではなく、画像のレタッチ素材としての使用例を見てみましょう。

外観画像：熊本の歯科医院「中川歯科」様
写真に写っている不要な部分をカットしただけだと、もちろんその部分がポッカリ空いてしまいます。また、人が写っていないので少し寂しい印象もありますね。

素材を使って植物や人物、背景などを合成してみました。さっきより明るい雰囲気になったかと思います。このサンプルは適当に合成したので不自然な部分もありますが、きちんと補正すればもっと自然なイメージにすることも可能です。
ただし、加工しすぎて実際とあまりにも違うイメージになってしまうとユーザーが混乱してしまうので、程々にしておきましょう。

いかがでしょうか、使い勝手の良い素材も多いのでぜひチェックしてみてください！

こんにちは、内田です。
初のブログ投稿ということで、環境構築系の記事をしばらく載せようと思います。

まずは、MacでWeb開発やるなら必須レベルのHomebrewのインストール方法から。
＊ OSバージョンが 10.6 以前である場合、下記の方法では環境構築できません。

 

Homebrew公式
OSX用パッケージマネージャーです。（まんま
つまり、ソフトウェアの導入をよりカンタンにするための道具です。

Macに標準で入っていないwgetがコマンド1つでインストールできたり、
rbenvによるRubyのバージョン管理などもカンタンにできます。

 
Homebrewと同じく、パッケージマネージャーとして有名な「MacPorts」を
インストールしている場合、公式のガイドにしたがって削除しておきます。

同じく、「rvm」もインストールしている場合、切腹しておきます。
rvmとかrbenvってなんだよという方は下記の記事に大変よくまとまっています。
Rubyのrvmやgemってなんだ？て調べたらrbenvが出てきたの巻

 
AppStoreから検索してインストールしておきます。

 
・OSX Marverics の場合
下記の記事を参考にしてください。
MavericksでCommand Line Tools for Xcodeをインストールする

・OSX Mountain Lion 以前の場合
Xcodeを起動 → Preferences → Downloads → Command Line Tools をインストール

 
準備ができたらインストールします。
ターミナルを立ち上げて下記コマンドを入力してください。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew doctor # "Your system is ready to brew." と表示されればOK

以上でインストールは完了となります。

 
最初に言ったとおり、コマンド1つでインストールできます。

brew install wget

インストールが終わったらwgetしてみます。

cd ~/Desktop/

wget http://www.fvs-net.co.jp/img/common/logo01.png

フロンティアビジョンのロゴマークがデスクトップにダウンロードされます。

Macには標準でcurlというコマンドが入っていますが、
wgetとcurlは使い分けるべきで、それぞれ長所と短所があります。

wgetとcurlの根本的な違い

 
いまさらな記事なので、ググれば同じような記事はたくさん出てきます。
Homebrewを使ってrbenvをインストールしたあとにRailsやらSassを入れるのは鉄板ですね。

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

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

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



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

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

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

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


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

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

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

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

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

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

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

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