MEっぽいもの:CSSのプロパティ記述の順序について考えてみた。


こんにちは。くれです。

コーディングするうえでcssの記述について、書き方はそれぞれかと思いますが、
たとえばまぁ誰かのコードを引き継ぐ際なんかに、
なんじゃこりゃ、
といったような書き方もあったりするので、
ある程度定まっていた方がメンテとかしやすいと思いますので、
参考までにこんな順序で書くようなかんじです。

1:ボックスレイアウト系プロパティ
position
top
left
float
display
z-index
————————-
positionなんか先に来ると、なんかこう、気合を感じますよね。
オラオラァ!みたいな。
position:abusoluteだオラァ!みたいな。
————————-

2:ボックス装飾系プロパティ
width
height
margin
padding
background
border
————————-
レイアウトの次には装飾ですね。
width~borderまでの間に、何かこう、
ひとつひとつ出来上がっていくストーリーみたいなものが見えていいですね。
gifアニででも見たいところ。
————————-

3:インライン系プロパティ
text-align
color
font-size
font-weight
————————-
そして最後にインライン。総仕上げ/大詰めっていうかんじですかね。
————————-

例としてはこんな感じの記述になります

span.txt {
position:absolute;
top:100px;
left:150px;
width:400px;
height:200px;
padding:50px 10px;;
background-color:#ccc;
text-align:center;
color:#f00;
font-size:2em;
font-weight:bold;
}

————————–
(オチ入れる)
————————–

Teepeeっぽいもの: 恵比寿 山長

どうも、くれです。
突然ですが、普段のランチや出先でのランチ、デートのディナーなんかを調べるのに何を利用していますか?
食べログで調べたり「銀座 デート 居酒屋」でgoogle先生に聞いているのではないでしょうか。
今回もまたまた弊社のアプリTeePee Guideを利用したグルメレポートをお送りいたします。

■teepeeって?
TeePee Guideは、テレビや雑誌などメディアで紹介された話題のお店を探せるアプリケーションで、シリーズダウンロード総数100万以上の人気アプリです。
全国各地のレストランやショップ、温泉、レジャー施設など4万件以上のスポットを掲載。約30の人気番組を中心に、独自の基準でピックアップしたスポットを随時アップデートしています。

ということで、アプリを起動します。

※ホーム画面から見えるユーザー像ってありますよね。

左上にあるteepeeアプリのアイコンをタップすると、teepee guideが起動します。
弊社の近くを見てみると、

やっぱり恵比寿、メディアに取り上げられるお店がたくさんありますね。
とりあえず、ピンを押してみると、


お、うどん。
もう少し掘り下げてみよう。


ふむふむ、説明と地図情報なんかがありますね。
メディアはテレビがひとつと雑誌が二つ。「メディア」をタップすると、


お、王様のブランチ。
じいちゃん!ばぁちゃん!唯が行ぐがらな~!!!(にじいろジーンでした)

お、ええやないか、ということで、今日はこちらにお邪魔しましょう。
ちなみに私の中でのヒエラルキーは
冷たいお蕎麦>温かいお蕎麦>温かいおうどん>冷たいおうどん


通称タコ公園横の細い道を進むと、


ありました。後で聞いたところでは、ピーク時にはかなり並ぶこともあるそうなのですが、この日は時間が遅かったのもあったせいか、すんなり入れました。

店内に入ってメニューを開きます。

メニューが豊富でどれにしようか迷いましたが、鶏のてんぷらと温泉卵のうどんをチョイス。
うどんを頼む際に、細い麺か太い麺か尋ねられますので、ドヤ顔で細い麺と答えましょう。
さらにランチには特製のどんぶりがついてきます。しかもおかわり自由!

※同じタイミングで入ったほかのお客さんは揃いも揃って九条ねぎうどんをオーダーしてました。

オーダーも終わったので、うどんが運ばれるまでの間、foursquareとfacebook チェックインで周りにグルメっぷりをアピールしちゃいましょう。

もちろんteepeeからもtwiitterとfacebook連携しているので、アプリからシェアするのもいいですね。

とか言ってる間にやって参りました、鶏のてんぷらと温泉卵のうどん。

美しい。

こりゃたまらんとパクついていきます。

うどんさんも、

鶏のてんぷらさんも、

しいたけさんも、

どんぶりさんも、

うままままままままぁぁぁぁぁぇぇぇぇぇぇえええええええええええええええええええええええええええええええええええ!!!
なんすか、麺のコシっつうんすか、つるつるしこしこっていうやつっすか、だしも上品…!上品に香るこの感覚…!鶏のてんぷらも冷たいおうどんにあたたかいてんぷらのこれをハーモニー、和音っつうんすか、しいたけも味がしゅんでて噛むとじゅわっと味が香るんすか、いいんすか、これ。

うどん→具→どんぶり→うどん→具→どんぶりと繰り返したらすぐに、

ごちそうさまでした!リピ決定でーす☆

といったように使えるteepee guide、みなさんもいかがですか?

アプリのダウンロードはこちらから↓

ディレクターっぽいやつ:web制作会社のキャッチコピーあれこれ

こんにちは、webディレクなんとかの呉です。

先日web界隈ではない友人と飲んでいましたら、「webディレクターって何する人なの?」という問いを受けましたので、「デザイナーにお願いしたりプログラマにお願いしたりする人」と答えたわけで。

まぁ、コンパの時なんかでもそうなのですが、
女性「仕事何してるの?」
呉「webの仕事」
女性「どんなことしいてるの?」
みたいなくだりはあるわけで(アレな人は大体「webの仕事」の後に「えー!すごーい☆」で終わりますね)、その時々でおおげさなこと言ったり自虐的なことを言ったり女性のタイプに合わせて返答を変えてうまいことコミュニケーションを進め、あわよくばどこか二人で抜け出そうといたしますので、これからもがんばっていきたいなぁと感じる所存でございます。

というのは置いておきまして、webディレクターの仕事は前述のお願いする人でもなく、やることはわんさかあるわけで、ざざっと列挙すると、
・スタッフィングしたり、
・外注選定したり、
・オリエン聞いたり、
・見積もりつくったり、
・提案書つくったり、
・プレゼンしたり、
・サイトの設計考えたり
・ワイヤーフレームつくったり、
・客先と交渉したり、
・コピー書いたり、
・情報集めたり、
・アクセス解析したり、
・検証したり、
・twitter見たり、
・ブログ書いたり、
するわけです。
※会社によって、肩書きで分類したりしいているかと。

で、まぁつらつらと書いているうちに、
・コピー書いたり、
というのがあって思いだしたわけですが、そういえば弊社キャッチコピー無いんですよね。

で、まぁキャッチコピーがあっても良いなぁと思いますので、書いてみようと思いますのでここはいっちょ、
・目の付けどころが、シャープでしょ。 (SHARP)
・お口の恋人 (ロッテ)
・あしたのもと (味の素)
・あなたと、コンビに、ファミリーマート (ファミリーマート)
・ココロも満タンに (コスモ石油)
などなど誰でも聞いたことあるような、聞いた際に企業名が浮かぶようなキャッチコピーにしたいわけで、よし、がんばるぞー!と勇ましくシャーペンを取り出すわけですが、当然ながら上に書いた企業は超のつく大企業でメーカー、ブランドは浸透しているわけで、弊社のようなtoBのweb制作会社は立ち位置が違うぞ、と思うにいたり、その前にweb制作会社ってどんなコピーつけてるのかしら、と見てみたわけです。

まぁキャッチコピーと呼ぶか企業理念と呼ぶか経営理念と呼ぶか、たとえば企業サイトにまず表れる会社の表す言葉、というところで集めてみました。

TAM
TAMはパートナー型Webプロダクションです。

e-bird
顧客ニーズに最適なウェブサイトを企画提案からデザイン制作までをトータルプロデュース
Web制作会社として、インターネットの利便性を世界中の人に届けたいと考えています。

ficc
BRAND SITE DESIGN ブランドの魅力を最大限に引き出すブランドサイト

エレファント・コミュニケーションズ
クライアントのニーズを理解するところからはじめ、成功へのシナリオをクリエイティブを通して実現する、クリエイティブエージェンシーです。

株式会社オーク
we hub IT, we lab IT! つながる、つなげるビジネスへ

株式会社アーティス
ユーザビリティに特化したホームページ制作・Web制作をご提案します。
人間の認知特性や心理、行動科学の理解にもとづいた 上手なコミュニケーションで笑顔を増やす

IMJグループ
未来を切り開く、新たな出発

株式会社アジャスト
求められる情報を求める人へ

株式会社aradas
aradas;(アラダス)の仕事は「あなたの仕事のお手伝い」。

株式会社イデアルデザイン
ひとりひとりのアイデアからすてきなクリエイティブへ

株式会社インフォメーション・ アーキテクチャ研究所
目指すのは、人と人との最高の関係作り IA labは、意欲あるWeb担当者を応援します。

株式会社エクザム
「エクザムがあってよかった。」そう言ってもらえる会社でありたい。
ITを通じてみなさまのビジネス、生活、楽しみに貢献することが、私たちの喜びです。

ウェブホームメイドデザイン事務所
どう言うかよりも、まず何を言うかを一緒に考えるウェブデザイン事務所です。

AQ株式会社
The idea to Business AQ株式会社はアイディアをビジネスにします

株式会社エスアンドシー
DTP×WEB 2つのメディアでトータルプロデュース
お客様が求める最良の結果を目指します。
お客様のニーズにあわせた最適なホームページを提案します。

株式会社キュービット
The correct solution by unique idea

カトリデザイン事務所
デザインしたくて、ムラムラしてます

株式会社クライマークス
Consulting × Information Architecture × Designing

株式会社グラブデザイン
アイデアを「楽しく」かたちにするグラブデザイン

株式会社 コンテンツ庵
WEBをもっとおもしろくする会社

株式会社サイブリッジ
one more value 私達はより付加価値の高い、よりお客様の満足度の高いサービスを目指します

シナジーマーケティング株式会社
私達は、最先端のマーケティングテクノロジーでコミュニケーションをよりよくする会社です

ソラソル株式会社
プラスワンのアイデアで世の中をハッピーにしたい

株式会社ティファナ・ドットコム
売上げをUPさせるWeb制作が得意です。コンバージョンアップさせるWeb制作・ホームページ制作会社。

株式会社dig
感性の戦略で企業イメージを創造します

株式会社デスクトップワークス
わくわくする想像をクライアントと共に

チェックフィールド株式会社
ITに関するお悩みを解決すること。それが私たち、チェックフィールドの仕事です。

株式会社ティープラスデザイン
シンプルに。モダンに。クールに。

有限会社デザインスタジオ・エル
グラフィックとWebの会社
グラフィックデザインとWebサイト制作の両方が得意です。

株式会社ピーエスシー
best communication! 最良のWebサイトは企業にとってのベストコミュニケーションツール

ヒトイロウェブ
接客力のあるホームページづくりをお手伝いします。

株式会社プラルト
販売促進をもっと効果的に

株式会社ペンシル
WEB戦略を成功に導くITコンサルティング企業

有限会社ハビタス
Webサイトにユーモアを。もちろん知性や戦略も。

株式会社マックスマウス
マックスマウスの制作実績は700社以上。サイト設計からWebデザイン、システム開発、運営サポートまで、企業Web戦略のすべてがここにあります。

マーカーネット株式会社
成功し進化し続けるWEBサイト

村式株式会社
鎌倉のウェブ屋

有限会社リズムタイプ
リズムタイプは人に関わるものを作っています。
「一緒に考え、作っていくこと」を大事にしています。

ってな具合で、具体的なものから抽象的なもの、「こういうことしまっせ」、みたいなものもあれば「われわれは○○です」とか「こうしましょうよ」的なものなどいろいろありますね。見てもらいたいのはクライアントとなるメーカーや広告代理店になりますので、そこに刺さるところ考えないとですね。(代理店クリエイティブにコピーを発注するのはアリかしら。)

っていうか多いですね。ピックアップしたところもまぁ同業種の競合他社なわけで、負けないようがんばるぞー!と思いながらこの弱肉強食の世界の中でひときわ光り輝くコピーを書こうと思います。引き続きよろしくお願いいたします。

デザイナーブログっぽいやつ

こんにちは、◯◯です。

みなさん、もちろんwebフォントはご存知ですよね。
国内の和文フォントでもFONT+、TypeSquare、デコもじ、アマナイメージズ WEBフォントなど充実し、利用しているサイトもちらほら見かけるようになってきました。
知ってるけど、導入はしてないなぁ、という方が多いのではないでしょうか。
今回はwebフォントの紹介と、超絶簡単に導入できるgoogle web fontをサイトに導入する方法をご紹介します。

■webフォントって?
Webサイトにオリジナルのフォントを埋め込む技術です。
WindowsではMS PゴシックとかArialとかVerdanaが標準フォント、macではOsakaとかヒラギノ角ゴなんかですね。
font-family : “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif;
こんなかんじでベースにしてるデザイナーもいるかと思います。

■webフォントのメリット
・表現力の多様性
→デバイスフォントに依存しないので、サイトにあわせた文字表現が可能になります。

・テキストデータなのでSEOに有利。
→Googleは「テキストを画像置換する手法」については非推奨で、
「Webフォントを使ってテキストをきれいに見せる手法」を推奨していますね。

・コピペが可能
→テキストなのでもちろんコピペが可能です。
引用されやすいので、twitter,tumblrなどドンと来いですね。

・修正が楽ちん
画像を修正→書き出し→サーバーにアップ
という作業はなくなり修正が2秒ですね。
※クライアントに「キャッシュ消してみてもらえますか?」というやり取りもなくなる!?

・自動翻訳にも対応。

といっても当然webフォントにもデメリットもあるわけで、
以下、webフォントのデメリットについても触れておきます。

■webフォントのデメリット
・和文フォントではデータが重く読み込みに時間がかかる。
→前述のwebフォントサービスなどでは、WEBページ内で使われている文字だけを抽出して、フォントデータだけを読み込む処理をしていますが、欧文フォントの数キロバイトに比べるとやはり和文のほうが重たく、読み込みに時間がかかってしまいますね。

・ブラウザによって差異が生じる
webフォントは古いブラウザも含め対応はしていますが、どうしても表示の違いが出てしまうので、検証に時間がかかってしまいます。
※クライアントとのコンセンサスはディレクターの手腕に期待しましょう。

というメリット、デメリットを踏まえつつ、今回はgoogle web font をさっくり簡単導入してみましょうか。

■google web fonts とは
Google Web FontsはかのGoogle様が提供しているwebフォントサービスで、他のフォント提供サービスと比較しても登録が不要などとても簡単に利用できます。

導入方法はざっくりと、
1.選ぶ
2.コピペ
3.cssあてる
と超絶簡単3ステップ。

1.選ぶ

こちらがgoogle web fonts の画面。
まぁフィルタやらソートがあるので、使いたいフォントを探して「Add to Collection」をクリック。

すると、選んだフォントたちが集まるエリアが表示されるので良ければ「use」をクリックしましょう。

レビューが表示されましたね。
選んだフォントの中に太さなどいくつか書体があればこちらで選択します。
右側にページの読み込み時間の目安となるメーターが表示されて便利ですね。赤にならない程度に選ぶとよいです。

はい、ここまでで選び終わりました。

2.コピペ
先ほどの画面で下にスクロールすると、コードがありますので、

ここをコピーして、htmlに貼り付けます。

はい、コピペ終了。cssがインストールされます。

3.cssあてる


さらに下にスクロールすると、fontの指定方法が記載されているので、
cssでclassをなどをあてると、はい、終了です。

ということで、つくってみたメタリカがこちら

フォントで印象はだいぶ変わりますね。
みなさまも積極的にwebfontを使ってみてはいかがでしょうか。

そんじゃーね☆

タイトルタイトルタイトル

画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し見出し見出し見出し見出し見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

        リンクリンクリンク
        リンクリンクリンク
        リンクリンクリンク

オチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチオチ