Are you the publisher? Claim or contact us about this channel


Embed this content in your HTML

Search

Report adult content:

click to rate:

Account: (login)

More Channels


Showcase


Channel Catalog


older | 1 | 2 | (Page 3) | 4 | 5 | .... | 12 | newer

    0 0

     

    こんにちは、室内でも日傘が手放せないnishiです。

    社内の窓際で日差しに照らされながら、
    最近 phososhop CS5をいじりはじめました。
     

    魔法の言葉【コンテンツに応じる】

     
    今回はCS5の新機能【コンテンツに応じる】という
    魔法の様な機能についてご紹介したいと思います。
     
    使いたい写真素材に、必要のないものがうつってしまっている事ってありますよね。
    これまでスタンプツールなどで手動で修正していた所を
    この【コンテンツに応じる】を使うと、
    周りのパーツから良い感じに合成してなじませてくれます。
     

    100812_nishi_01.jpg

    こちら建物の2Fは自由が丘のオフィスです。緑の芝生がチャームポイント。
    1Fは、KAYACのサービスART-METERという絵の測りのお店です。
    自由が丘に来た際は是非お立ち寄りください。

     
    100812_nishi_02.jpg
    さて、ここの芝生にちょいちょい空いている穴や、筋を消してみます。

    やり方は2つあります。

    1つ目

    補正したい箇所を選択範囲で選ぶ
    100812_nishi_03.jpg


    塗りつぶしで”コンテンツに応じる”を選択して塗りつぶす
    100812_nishi_tool1.png
    すると…

    100812_nishi_04.jpg

    結構きれいに消えました。

     

    二つ目

    スポット修復ブラシツールで、コンテンツに応じるを選択
    100812_nishi_tool2.gif

    補正したい箇所をブラシで塗っていく
    100812_nishi_05.jpg

    すると…

    100812_nishi_06.jpg
    犬の所や影の部分がちょっとにじみましたが、まぁ結構きれいに消えましたね

     

    どこまで【コンテンツに応じて】くれるのか

    他の写真でもためしてみたいと思います。

    100812_nishi_07.jpg

    鎌倉オフィスで楽しそうに飛んでいる弊社CCOが印象的なので、
    それ以外のものを極力消してみます。

    100812_nishi_08.jpg
    電気とか天井などは、いい感じに補完してくれましたが、
    下の座布団まわりが厳しそうです。
     
    100812_nishi_09.jpg
    目の前にいても”いない”と言われる程存在感のない社員
    少しはみでてうつってしまっているので、存在を消してみます。
     
    100812_nishi_10.jpg
    1回目。
    やっぱりごちゃっとしてると、思わぬ補正がされてしまいますね。
     
    100812_nishi_11.jpg
    4、5回繰り返すとわりと消えました。
     
    ただこの辺までくると、手動でやったほうが早い気がしてきました。
     
     
    100812_nishi_12.jpg
    最後に、逆に顔以外をすべて選択して
    それ以外を【コンテンツに応じ】させてみました。
    どうなるんでしょうか。
     
    100812_nishi_13.jpg
    気持ち悪い。
     
    意外と少しランダム性のあるパターンの生成にも使えるかも?しれません。
     
     
    他にも新機能でいろいろ追加させているようですが、それはまたの機会に。
     
    さりげなくスマートオブジェクトとマスクのリンクが効くようになっていたのが
    個人的にはうれしいバージョンアップでしたyes

    0 0

     

    突然ですが、フォーム使い分けてますか?

    ネットでお買いものするとき、ブログを書くとき、なんとな~く使っているフォーム。

    デザインするときには、その特性にあわせて使い分けることが大事です。
    利点と欠点、どんなときに使うかを、説明できますか?
     

    【問題】ユーザに下記を入力してほしい場合に、どのフォームをえらぶ?

    ==
    <お好きな野菜どれでも5種類 1500円で宅配します!>
    下記から、お好きなものを5種類を選んで注文してください。
     
    なす/ピーマン/おくら/かぼちゃ/トマト/きゅうり/小松菜/
    にんじん/じゃがいも/玉ねぎ/レタス/とうもろこし
    ==
     

    次のうちどのフォームを使いますか?

    A:ラジオボタン
    B:チェックボックス
    C:ドロップダウン
    D:トグルボタン
     

    各フォームを使う利点と欠点を説明してください。

    A:ラジオボタン
    B:チェックボックス
    C:ドロップダウン
    D:トグルボタン
     
    こたえは続きで!

     

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    こたえはそう、Bのチェックボックスです。
    簡単でしたね!
     

    どのフォームを使うかを考えるときのポイント

    1:ユーザーが自分のするべきことが直感的にわかるか

    一つだけ選択できるの?

    複数選択できる?

    自由に入力できる?

     

    2:スペースの確保

    フォームによっては、スペースを消費してしまうものがあります。
    スクロールさせたり、ページ遷移させる、flashなどを使ったリッチなUIにするかなど
    設計段階でディレクターと相談しましょう。
     

    どんなときに使う?利点と欠点

    A:ラジオボタン

    複数の選択肢から一つしか選べないときに使用します。

    利点:すべての選択肢がみえている。
    欠点:項目が多い場合、スペース消費量が多い。
     
    radio.png

    B:チェックボックス

    複数の選択肢から、順不同で複数選択できるときに使用します。

    利点:すべての選択肢がみえている。
    欠点:項目が多い場合、スペース消費量が多い。
     
    checkbox.png
     

    C:ドロップダウン(1行)

    複数の選択肢の中で一つを選択するときに使用します。

    上下に広がるので、単位を選択させる場合にもよく使用されます。

    利点:スペース消費量が少ない。
    欠点:メニューが開いているとき以外は1つしか選択肢が見えない。
     
    pulldown.png
     

    D:トグルボタン(ベベルボタンとも呼ばれます)

    複数選択と、一つしか選択できない場合の両方で用いられます。

    リッチテキストのフォームの上部やアプリケーションでよく見られます。

    利点:すべての選択肢がみえている。
    欠点:アイコンの場合、解読しにくいおそれがあるため、ツールチップが必要になる。
     
    toggle.png
     
     
    新人Webデザイナーのみなさん、用法容量を守って、
    使いやすいフォームを作りましょうー!
     

    0 0

    コンセプトなきUIにユーザビリティは宿らず( ^ω^)9

    こんにちは。
    セレビィをもらいに映画館までいこうか、まだ迷っているセキネですdevil

    今回はブログリニューアルに関しての"ユーザビリティ:いかに今回のUIに至ったか"についてです。
    前回のコンセプトの記事とセットということで。
    2投稿連続でブログリニューアルに関する概念的な話しになってしまい恐縮ですが、今しか出せない旬ものという事で。

    ではまずはベタにヤコブ・ニールセン氏の
    「ブログのユーザビリティ:デザインの間違いトップ 10」でも振り返ってみましょうか。
    ではどうぞ( ^ω^)y

    1. 著者紹介の欠落
    2. 著者写真の欠落
    3. 不明確な記事タイトル
    4. リンク先が記述と異なる
    5. 過去の名作を埋もれさせてしまう
    6. カレンダーだけが唯一のナビゲーション
    7. イレギュラーな更新頻度
    8. 話題の多様性
    9. 将来の上司が読むことを考えていない
    10. ブログサービスのドメイン名を使っている

    2005年ですが、現在でもうなずける部分はあります。
    各詳細は以下リンクからどうぞ

    Alerbox日本語版:ブログのユーザビリティ:デザインの間違いトップ 10


    今回のリニューアルにあたって多くのサイトを閲覧してきましたが、当時問題点として上げられていたこれらの項目のほとんどを大体のブログはクリアしていたように思えます。

    1や2はわれわれ日本国民にとっては扱いにくい項目ではありましたが、twitterなどの参入によりその問題点を解消できているのでは、と思います。他は基本ですね。
    現代でも時折見かける問題としては7や8の"更新頻度"や"ブログでとりあげる話題のブレ"あたりでしょうか。
    とにかく、当時の模範が現在のスタンダードへ着実に繋がっているのが分かります。
    「読まれるブログ/優れたブログが生き残る→他が続く」のループなので当然といえば当然ですが。

    "ブログ"は"ブログ"

    結論として、"構成/使用感に関しては、現代のブログらしくあれば問題なし"ということでスタートです。
    そこに「パッと見ブログらしくなく、また挑戦しているデザインに仕上げたい!」という今回の目標をどうねじ込むか、が問題点となりました。
    根底の古き良き部分は保ちつつ現代版にデザインをバージョンアップさせるわけです。
    使える(機能的)・新しい(挑戦している)・わらえる(なんかウケる) の3拍子を求めて、情報収集の開始です。

    そんなことを念頭におきつつ数多くのクールなブログを見直してみると、「どこも大体同じ」というところに落ち着くと思います。(勿論、パーツの作り込みやクオリティによって見た目の違いは当然出ていますが)

    何故かというと「ブログ」は「ブログ」であって、またそれがユーザーにとっても1番だからです。
    いつも通りの動作で期待した反応が返ってくる。結局それがベストなんですね。
    優れたブログほど、結局「ブログらしい」形をしている、というわけです...

    ただそれでは僕らの存在意義が問われてしまうので

    もっと人間自身の動き(web上ではなく)に立ち戻ってみてユニークなデザインのUIは実現出来ないか、と考えてみることにしました。そしてそこから前回コンセプトについて書いたところに着地した、というわけです。
    本屋さんの立ち読みの動作などですね。
    本当はもっと「ブログ」の根底からひっくり返すようなアイデアを実現出来たら良かったのですが...(; ^ω^)9
    ...ただ、今回の件でユーザビリティやUIについてのたくさんの記事を目にすることが出来たのですが、本当に奥が深くて面白い。心理をデザインするわけですからね。
    もっともっと僕らデザイナーがこの領域に注目してこれからのwebの世界を作っていけたら、もの凄くトンデモナイことになるぜ、とドキドキしていますyes

    そんなこんなで、カヤック意匠部Blogはより使い易いブログになるべく進化中です。
    ソーシャル系ボタンの表示速度をより快適にしたり(初期は本当に重くて時間がかかりすぎてました...)、
    滞在時間が伸びると聞けば速攻で取り入れたり、と日々アンテナを張り巡らせています。
    他にも気になる改善案などあればどんどんタレコミフォームまで、よろしくおねがいします。
    ちなみに、次段階ではブックマークのページを作成中です。お楽しみにdevil



    最後におまけで、ユーザビリティに関するおすすめサイトを勝手に紹介しておわりにしたいと思います。
    あまり多くてもしょうがないので3つどうぞ!

    Jakob Nielsen博士のAlertbox

    本記事中でも引用させてもらいました。有名すぎるヤコブ・ニールセン氏のコラムです(日本語訳版)。
    読んでおいて損はありません。本人写真ナイスチョイス。

    ユーザビリティ実践メモ

    あらゆるユーザビリティについての画像つきで分かり易い記事。分かり易いって正義!

    あとちょっと良いサイト ACS

    手書き漫画つきで概念的な事柄も分かり易くまとめているブログ。
    内容がすごく考えさせられるものであり、また書き方も非常に上手で引き込まれます。
    個人的にはすごいヒットしました。参考になります。


    0 0

    iPhone4 がついに届いて興奮気味のgunjiです。
    2週間待ちでした!

    待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む)
    のコーディングで気をつけることについておさらいしていたところ、

    Retinaディスプレイに画像を最適化させるのって意外とめんどいよね!

    という現実に打ちのめされたので、まとめてみます。

    そもそもRetinaディスプレイってなんでしたっけ?

    はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で
    画面がとってもキレイに見えるんですよね!
    拡大しなくても小さな文字が読めるなんてサイコー!

    ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと
    不思議な状態になってることがあるのです。

    iPhone4で見たらなんか画像がにじんでるように見える・・・?!

    iPhone4だとなんか画像がにじむ・・・

    こういうイメージです。
    そう、2倍の解像度ってことは、今まで等倍で表示していた画像が
    2×2=4倍に引き伸ばされて表示されるということなのです。

    (ネイティブアプリでの切り替えや詳しい画像の作り方については別のメンバーが
    書くって言ってました。お楽しみに!)

    では、WEBアプリ(サイト)ではどうすればiPhone4の高解像度を活かして 画像をきれいに表示することができるのでしょうか?
    つづきから、詳しく見ていきましょう。

    (1)ぜんぶ高解像度の画像にする

    一番単純な方法です。
    最初からRetinaディスプレイに合わせて表示サイズの2倍の画像に全部差し替え、
    widthとheightで大きさを調整します。

    サンプル1


    →iPhone4でサンプルを見るとこんな感じ

    HTML

    2倍の画像で差し替える

    等倍の画像(PNG)

    こえ部

    2倍の大きさの画像(PNG)

    こえ部

    CSS

    section#sample_1 p.retina {
    	background: url(./img/bg_character_2x.png) repeat 0 0;
    	-webkit-background-size: 91px 84px;
    }
    

    元々のサイズは
    logo_2x.png → 横320px×縦140px、
    bg_character_2x.png → 横182px×縦168px
    です

    背景画像の場合はsafariの独自拡張-webkit-background-sizeで表示サイズを
    調整することができます。

    メリット: 画像が1種類でいいし、設定の仕方も比較的楽。
    デメリット: 3Gで表示が重いかも

    (2)画像を2種類つくって切り替える

    iPhoneのバージョンを判別し、4だったら高解像度画像を、
    それ以前であれば等倍の画像を表示する方法です。

    PHPやPerlなどでUserAgentを判別し切り替える方法もあるのでしょうが、
    CSS3だけでも実現できるのでその方法をご紹介します。

    国内の記事だと、 【レポート】iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方に詳しく解説してある方法です。

    サンプル2


    →iPhone4でサンプルを見るとこんな感じ

    HTML

    画像を2種類つくって切り替える

    等倍の画像(PNG)

    こえ部

    2倍の大きさの画像(PNG)

    こえ部ロゴ

    CSS

    section#sample_2 p.retina {
    	width: 160px;
    	height: 0;
    	margin: 0 auto;
    	overflow: hidden;
    	padding-top: 70px;
    	background: url(./img/logo.png) no-repeat 0 0;
    }
    @media only screen and  
        (-webkit-min-device-pixel-ratio: 2) {
    	section#sample_2 p.retina {
    		background: url(./img/logo_2x.png) no-repeat 50% 0;
    		-webkit-background-size: 160px 70px;
    	}
    }
    

    CSSではimg要素のsrc属性を操作できないので、
    画像をimg要素ではなく、CSSで背景画像として設置します。

    CSSの9~10行目はCSS3のメディアクエリによるフィルタで、
    画面のタイプによってあてるスタイルを変えることができます。

    中でも「-webkit-min-device-pixel-ratio: 2」はwebkitの独自拡張で
    =デバイス上の最小ピクセル比率がCSSの2倍になる
    =通常のディスプレイの2倍の解像度を持つiPhone4
    を判別することができます。

    2倍の画像を表示する場合は、(2)と同じように-webkit-background-sizeで
    表示サイズを調整します。

    メリット:環境に合わせて適切な容量のファイルを表示できる
    デメリット:画像の数が多いとひとつひとつCSS指定するのが辛すぎる

    ほんと辛すぎる・・・ということで
    HTMLを変えなくても、特定のclassをつけておけばJavaScriptで
    勝手に置き換えてくれたりできるようにならないかなーと思って社内のJSerに
    相談してみましたが、どうやらSafariでは実現が難しいようです。

    (一度ページをレンダリングしたあとに置き換えることはできるようですが
    それだと画像のリクエストが2回飛んでしまって表示が重くなってしまう)

    (3)画像はスケーラブルなデータ形式で用意する

    そもそもビットマップじゃなくてベクターデータで画像を作れば拡大縮小しても
    大丈夫だよね!ということで、画像はもれなくSVGで用意することにしてみます。

    サンプル3


    →iPhone4でサンプルを見るとこんな感じ

    HTML

    画像はスケーラブルなデータ形式で用意する

    PNG画像

    こえ部

    SVG画像

    こえ部

    メリット:将来どんな解像度のデバイスがきても、対応できる可能性がある。ズームしても変わらずきれい!
    デメリット:制作環境があまり一般化してない。画像の種類によっては重いかも。

    なんですが、これ今回やってみたら思いのほかカンタンに、しかもきれいに
    表示されたので、感動しました!Illustratorで書き出したSVGファイルをobjectタグで配置しただけです。
    ベクターデータなのでパスの数が増えるとデータが重くなるということ、個数が増えるとレンダリングに
    ちょっと時間がかかる(ような気がする...ベンチマーク取ってません)ということに
    気をつければ、iPhoneサイトにおいてはもうじゅうぶん実用レベルかもしれません。

    SVGはIE9でも採用されるらしいので、今後スケーラブルデータの
    スタンダードになるかもしれませんしね。

    おまけ:全部PNGのページ VS 全部SVGのページ
    とりあえず10個くらい並べて表示速度を比べてみました。SVGのほうが心持ち重く感じます。

    画像はそもそも使わないデザインにする

    タイトル文字や角丸、グラデーション、WEBフォントなど、CSS3で表現できそうなデザインを
    活用して、できるだけ装飾のための画像を使わないという方法です。スマートフォン向けのサイトを
    見ていると、そもそも画像は最小限しか使ってないところが多いです。

    自分はコーディングをしないデザイナも、画像を使わずどこまで表現できるか
    ということを知っておくとよいと思います。

    サンプル4


    →iPhone4でサンプルを見るとこんな感じ

    HTML

    画像はそもそも使わないデザインにする

    Text Title

    CSS

    section#sample_4 h2.retina {
    	margin: 0 10px 1em;
    	padding: 10px;
    	border: 1px solid #DDD;
    	-webkit-border-radius: 6px;
    	background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
    	text-shadow: -1px -1px 1px #BBB;
    	color: #FFF;
    }
    
    

    メリット:とにかく軽いし確実
    デメリット:複雑な画像は再現できない

    なお、今回ご紹介する方法はすべて、iPhoneのmobile safariのみを対象とした方法です。
    PCやほかの端末と共通のhtmlや画像を使う場合など条件によっては
    CSS3が使えなかったりするので別の方法が必要になります。

    カヤック意匠部ME課(メカ)では、
    WEBアプリのコーディングを仕事でバリバリ試してみたい
    マークアップエンジニアを募集しています!


    0 0

    個人的にVJでカンタンなモーションを作ったりする関係で PVなどをいろいろ見てるのですが、
    最近気づいたことが一つありました。
    フランス音楽業界のクリエイティブが熱い!
    このPVおもしろいなー かっこいいなーと思ってたら以外とフランス発のPVだったりするのです。
    ということで、今回はフランスのPV特集です。さっそく見ていきましょう

    Justice - DVNO

    まずフランスと聞いて浮かび上がるのがJustice。
    JusticeのPVは話題作ばかりですが今回はDVNOを紹介しましょう。
    ムービーがほとんどタイポグラフィで構成され、音楽に合わせてテンポよく変わります。
    また登場するタイポグラフィがなにかのオマージュだったりとユーモアさえ感じます。

    Breakbot - Baby I'm Yours (feat. Irfane)

    最近、様々なデザインポータルサイトで話題を集めているBreakbotの新作PV
    なんと手書きの水彩画などを混ぜながらこのニュアンスを作っているようです。
    絵が途切れなく変化してゆくアニメーション具合が絶妙です。

    DATA - Rapture

    こちらは単純に人が走ってるだけですが背景のグラフィックの切り替わりや、
    モーションの見せ方が純粋にカッコいい。
    また彼のCDジャケットなどは80s風のテイストで統一されており、
    本当にその時代にあったかのような錯覚さえ覚えます。
    一部My Space にて確認ができます。

    Lilly Allen - Fuck You

    主観で色んなところを歩いているのですが、女性が人をつまむと
    膨らんだり、ぐにょぐにょになっちゃったりします。
    まるでPhotoshopのフィルターをリアルタイムにかけてるかのようです。
    ARでこういうことができると楽しいですよね
    動画埋め込みが無効なため以下のリンクからどうぞ(曲名があれなのでこちらは修正版です。)
    http://www.youtube.com/watch?v=ZBLOQV9GsbY

    番外編 イラストレーター ステファン・マネル監督のPV

    こちらはイラストレーターが監督をつとめているPV。
    個人的にはちょっと前のカラフルな色使いが好きなのですが
    近年はモノクロの作品に力を入れているようです。
    一部公式サイトにて確認ができます。
    (アーティストはフランスではなくカナダを拠点とするChromeo)

    まとめ

    今回はエレクトロのアーティストがほとんどでしたが
    グラフィックやかっこいいモーションで構成している物が多かったですね。
    Justiceが所属してるレーベルのCDジャケットなどもベクターなイラストテイストが多いので
    お国柄そういうクリエイティブが好きなのでしょうか

    また、タイポグラフィだけで見せる。走っている人の背景で見せるなど
    シンプルな構成ながらも見てる人を飽きさせないセンスも素晴らしいです。

     



    0 0

    100819_shiiho_ic4_title.jpg

    こんにちは、社員で一番純粋な子供心をもっていると信じているshiihoです。
    (よなよな会社でハイパーヨーヨーやったりしてます。)

    さて子供時代と言ったら皆さんは何を思い出すでしょうか
    僕はガン○ムとかカ○ビィの絵ばかりを描いていました。

    今回はそんな子供時代に感じたワクワクする気持ちを思いださせてくれる
    IC4DESIGNさんのイラストワークを紹介しようと思います。
    (大きめの画像や未公開の新作も紹介しちゃいますよ!)

    それでは早速、見ていきましょう
     

    RADIO DRIVE

    IC4DESIGNさんは海外での活動も多く、こちらはアメリカにプロモーションするために制作されたそうです。
    いやぁこの描き込みには脱帽します。ユーモアもあってワクワクしてきますよね。

    (画像クリックで拡大できます。)
    100819_shiiho_ic4_main.jpg

    ANCMA ENIGMISTICA (未公開新作)

    こちらはイタリアのバイク協会のキャンペーン用に最近制作されたそうです。
    色未も暖かみがありますね


    (画像クリックで拡大できます。)
    100819_shiiho_ic4_main2.jpg

    イラストワーク一覧

    イラストの書き込みも素晴らしいですが、独特な世界観も心が魅かれます。100819_shiiho_ic4_01.jpg

    100819_shiiho_ic4_02.jpg

    100819_shiiho_ic4_03.jpg

    100819_shiiho_ic4_04.jpg

    100819_shiiho_ic4_05.jpg
     

    IC4DESIGNさん との出会い

    最後にIC4DESIGN さんを知ったエピソードをご紹介しましょう。
    Behance NETWORK という海外のデザインポータルサイトがあるのですが、
    そこを休日に良く眺めてたりします。

    いつものようにだら〜っとサイトを眺めていたら、心魅かれる一枚のイラストを発見!!!
    制作者のホームページも拝見したところ、なんと日本の方と判明しました。
    twitterアカウントもあったので、すぐにフォローをし「ファンになりました。」と一言お伝えしました。
    色々とやりとりをしてるうちに、このブログで紹介したいと思い現在に至ります。

    急な話にも関わらず、ご協力頂いたIC4DESIGNさん ありがとうございました。
    (画像も提供してもらってます。)

    下記のリンクから他のイラストワークも見れます。 要チェックです!
    IC4DESIGN INC.
    IC4DESIGN  on the Behance Network


    0 0

    こんにちワンッ!

     

    デザイナー kaneyasu だワンッ!

     

    広告賞ってたくさんあるけど、どれに応募したらいいの?

    という人に向けて、個人で参加できるウェブ広告賞のまとめを書きました!

     

    ・・・でも、難しいんでしょ?

    そんなことありません。

    クライアントワークじゃなくても応募できるから簡単ッ!

     

    まず一点目はこちら!

    「Yahoo!クリエイティブアワード」 

    募集期間はだいたい、7~8月。

    今年は、8/10までで作品募集していました!

    2010年度の一般参加の部門は、バナー部門とウェブコンテンツ部門と、スマートフォン部門がありました。

    みなさん応募しました?

    ちなみに、2009年度の受賞作品はこちら

    2009年度受賞作品:一般の部:Grand Prix

    作品名:
    Blogopolis
    http://blogopolis.jp/

    2009年度受賞作品:一般の部:バナー部門 「LIFE ENGINE」:Gold

    作品名:
    Yahoo! DOG
    http://www.adbrain.co.jp/yica/yahoodog.html

     

    お次はこちらっ!

    1-click award

    Webコミュニケーションをテーマにした賞で、技術の新しさというよりも

    一本取られた!というワザありな作品が評価されているようです。


    募集要項は、1クリックじゃなくてもよいのですが、マウスやキーボードをちょこっと操作するだけで楽しめるものです。

    受賞作品を見ていると、これなら私にも出来るカモ!?というアイディア勝負な作品が多く応募しやすい賞だと思います!

    2009年度インタラクティブ部門 最優秀賞

    Walk Cursor
    http://www.taft.kit.ac.jp/1click/index.html
     

    2009年度プランニング部門 最優秀賞

    いつのまにか日記
    [PDF] http://static.creyle.rimg.jp/skin/1click/img/report/plan2009_gold.pdf


    ちなみに、弊社 佐藤ねじは
    顔の慣用句コンテンツ集「八百一彦」で、茂出木龍太賞を受賞しておりました!

     

    さてさて、お次はちょっと趣向を変えてトーナメント形式の広告賞です!

    カンヌ国際広告祭 ヤング・ライオン・クリエイティブ・コンペ

    通称ヤングカンヌ。サイバー部門(ウェブのこと)は今年から募集がはじまりました!

    28歳以下が応募条件で、各国予選を勝ち抜いた2名1組のチームが、現地で課題のオリエンテーションを受け規定の時間内で作品を制作し競い合う、カンヌ国際広告祭のスペシャルイベントです。

    ちなみに2010念の日本予選を勝ち抜いたのは、六反 孝幸(W+K Tokyo) / 大西 拓人(クスール)さんでした!
    お二人のカンヌ体験記ブログこちらです。

    自分たちの経験を後世に残そうという心意気が素晴らしいですね!

    来年応募する方は、しっかり勉強させてもらいましょう!
    ヤングカンヌ2010ライオン捕獲への道
    http://ameblo.jp/young-cannes-10-cyber/

    ちなみにこの年、
    2010 Gold賞は、
    Brazil のコピーライターとアートディレクターの二人組のこの作品でした。
    http://www.canneslions.com/lions/lightbox.cfm?media_id=1187
     

     

    こちらもおなじくフランスで開催される、24時間以内に制作するトーナメント形式の広告賞

    WIF (Web design International Festival)

    http://www.webdesign-festival.com/2010/

    http://japan.partners.webdesign-festival.com/

    2年に一度フランス・リモージュで開催される国際的なウェブデザインフェスティバルで、
    世界中から予選を勝ち抜いて参加したウェブデザインチームによる、24時間でのサイト制作のジャムセッションがあります。

    ちなみに、今年の日本予選テーマは、
    「日本の「ローカルの文化」はこれからどうあるべきかをイメージし、
    それを世界に開かれ結びつける可能性を持ったウェブサイトを考え制作しなさい。」
    というものでした。

    予選1位のチームは、フランスのリモージュで本戦があります。

    本戦も24時間の戦いで、日本予選を勝ち抜いた、

    弊社Barimi率いるo(’.'* v(*’w'*)v *’~')/ チームは、世界で戦って3位の結果でした!

     

    おまけ。ウェブ上で受賞作が閲覧できるサイトです。

    その他

    TIAA - TOKYO INTARACTIVE AD AWADS
    http://tokyo.interactive.ad.awards.jp/

    その他、ウェブではないですがアイデアの参考にどうぞ!

    ACC賞 テレビ・ラジオのCM
    http://www.acc-cm.or.jp/festival/09fes_result/index.php

    交通広告グランプリ 交通広告
    http://www.jeki.co.jp/transit/grandprix/

    朝日広告賞 新聞広告
    http://www.asahi.com/ad/clients/aaa/

    読売広告大賞 新聞広告
    http://www.yomiuri.co.jp/adv/award/yaa/

    新聞広告クリエーティブコンテスト 新聞広告
    http://www.pressnet.or.jp/adarc/adc/2009.html

     

     

    いかがでしたでしょうか。

    私なんてきっと無理!ムリに決まってるわ!

    なんて思わず、応募してみてはいかがでしょうか。

    バットを振らなければ、ホームランは打てませんよッ!(`・ω・´)キリッ

     

    ちなみに、いま開催されている賞やコンペなどの情報が知りたければこちらにまとまっています。

    登竜門

    http://compe.japandesign.ne.jp/ap/list/index.php3
     

    あっ、あと

    文化庁メディア芸術祭

    http://plaza.bunka.go.jp/festival/2010/entry/guideline.php

    が、いまなう募集中です!

    こちらは、

    2010年9月24日 必着

    プロ、アマチュア並びに自主制作作品、商業作品を問わず応募できるようです。

     

    ワンッ!


    0 0

    何でもすぐにやってみる!ということ。

    百式さんで紹介されていた、この記事

    記事の冒頭に『読むための所要時間』を表示させておけばいいんじゃね?」と思いつきます。

    これを、このブログでも早速実装してもらったのですが、その検証結果を発表したいと思います。
    (【7分で読めるよ!】ってところです。)

    01.gif

    まずは、先月の平均滞在時間

    03.gif

    そして、今月の平均滞在時間

    02.gif

    気になる結果はこちらっ!

    04.gif

    なんと30.43%アップしました。
    ただ、途中リニューアルをしたので、正確な数字ではないところもありますが、結果はまずまず!^^

    MT をお使いの方で、自分もやってみたいな!と思う方は、この記事をおすすめします。


    0 0

    歴代人気記事でも上位の ポータルのポータル

    今回は、iPad・iPhone・携帯サイトなど
    モバイルデバイスのデザインギャラリーを集めてみました!

    それでは続きからどうぞ。

    iPad・iPhone

    Landing Pad ー an iPad App Gallery

    01.png
    綺麗なiPadアプリがたくさん掲載されています。

    iOSpirations

    02.png
    iPad/iPhoneのアプリやサイトデザインが紹介されています。

    ishowcase

    03.png
    国内のiPhone / iPad最適化対応サイトが掲載されています。

    iPhoneサイトデザイン集のiPhoneデザインアーカイブ 公式サイト

    04.png
    国内/海外のiPhoneサイトがたくさん掲載されています。

    mobile AWESOMENESS

    05.png
    綺麗なモバイルデザインがたくさん。

    Web Design Inspiration for the iPhone

    06.png
    iPhoneにテーマを絞ってサイトが集められています。

    Mobile Gallery by MOBIFY

    07.png
    こちらもiPhone用サイトがたくさん掲載されています。

    国内携帯サイト

    モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト

    08.png
    携帯サイトのデザインがたくさん!

    モバミル - イケてる携帯サイトデザイン

    09.png
    3キャリア分の絵文字プレビューにも対応しています。

    case:MobileDesign! モバイルサイトのデザイン紹介ブログ

    10.png
    クリエイティブ性の高い携帯サイトが紹介されています。


    0 0

    27回目の夏を迎えた、ねじです。

    突然ですが最近、会話をしていて困ったことはないでしょうか。初対面の人、あまりよく知らない人との当たり障りのない会話、上司との沈黙の時間、マンネリ化した夫婦の会話…。

    今回はそんな会話を楽しくするためのアプリ、以前にブッコミシルバーからリリースした「話のタネ」というiPhoneアプリをご紹介します。

    会話のきっかけをつくる「話のタネ」

    100825_nezi_tane_01.PNG 100825_nezi_tane_02.PNG 100825_nezi_tane_03.PNG 100825_nezi_tane_04.PNG

    アプリの特徴

    • 話し相手との「間柄」「年齢」「性別」を設定すると、その人に合わせた「話のタネ」を表示してくれます。(例えば、80歳のおじいちゃんに昔の恋話を聞いたり、彼女に自分の好きな所をたくさん言わせたり。)
    • 「テーマ」を設定することで、特定の会話に絞ることができます。(店員さんと下ネタで会話!とか)
    • 気に入った話のタネがあれば、お気に入りに登録することができます。
    • 年代を入力することで、その時代に合った映画や音楽の話もできます。
    • 昔の映画で知らない名前のときなどに、その詳細を見ることもできます。

    出てくる言葉は、ありきたりな質問から、奇抜な質問、不思議な質問までいろいろです。

    実際につかってみた

    で、どういうタネが出てくるのか、これを使うとどうなるのか。
    実際につかってみました。


    タネ:「あなたの祖父の自慢をしてください」
    ●話相手:部下/男/20代/テーマ:指定しない
    →実は彼のおじいさんは、とある超有名な組織の重役だったことが判明。そして代々、剣道の達人であることも。たぶん、このアプリ使わなかった、ずっと知らなかっただろうなと思いました。

    タネ:「イチャイチャしてみたいマンガのキャラクターといえば?」
    ●話し相手:先輩/男/30代/テーマ:下ネタ
    →「BOYS BE」に登場する女の子(即答)。これには、私も大きく共感。テンションアップ。そこから、話は「小学生の頃のエロ」について移行していきました。

    タネ:「年下と年上、付き合うならどっちがイイですか?」
    ●話し相手:母/テーマ:恋愛
    →母の広大な許容範囲を知ることができました。

    タネ:「私のことがどれくらい好きかを「アッパーカット」で例えて下さい」
    ●話し相手:親友/テーマ:格闘技
    →そよ風のような、小さいアッパーカットいただきました。

    タネ:「Hな声で「無線LAN」と言ってください」
    ●話し相手:店員/女/テーマ:ネット関係
    →意外なタネが登場。セクシーな声での「無線LAN」。最高です!

    このように、
    実際につかってみると、普段の会話ではなかなか聞けないような、相手の意外な一面を知ることができたり、
    会話が思わぬ発展を遂げたりできました。
    本当に面白いコンテンツは、人との会話そのものだ。ということが実感できます。


    こちらは有料230円です。興味のある方は是非お試しください!

    club 話のタネをダウンロード


    0 0

     

    Macのシェアウェアを安く手に入れたい!
    欲しいシェアウェアが確実に手に入るわけではないですが、
    使えるシェアウェアが詰め合わせで安く手に入るBundleを販売しているサイトをご紹介。
    いま販売しているサイトも幾つかあります。
    新学期やホリデーシーズンに販売する事が多いですね。

    bundle010.png
    BundleHunt
    http://bundlehunt.com/

    bundle009.png
    TheMacBundles
    http://www.themacbundles.com/

    bundle008.png
    Bodega
    http://appbodega.com/

    bundle007.png
    MacHeist
    http://www.macheist.com/

    bundle006.png
    MacUpdate Promo
    http://www.mupromo.com/

    bundle003.png
    MacBundleBox
    http://www.macbundlebox.com/

    bundle004.png
    MacBuzzer
    http://www.macbuzzer.com/

    bundle001.png
    MacFriendly
    http://www.macfriendly.org/

    bundle005.png
    MacGraPhoto
    http://www.macgraphoto.com/

    bundle002.png
    MacZOT
    http://www.maczot.com/


    ちなみに、これ以外にもMacのソフトウェアを配布しているサイトでは、
    時々セールなんかもやっているんで要チェックですね。
    サイトのデザインも魅力的。

    MacBunndleBoxといえば先日こんな記事が
    1億円を稼ぎ出した16歳の少年のビジネス手腕に感嘆の声
    16際の少年が運営してたんですね。
    親まで雇用してるなんて...

     


    0 0

    こんにちわ。最近ソーシャルアプリやるようになったやしこです
    ソーシャルゲームはいま一番アツい分野!いろいろなゲームが群雄割拠です。
    でも画像が重くてさくさく連打できないとゲームの爽快感が半減してしまいます。悲しいけどこれ携帯なのよね。
    なるべくストレスフリーのみんなに優しいデザインをした〜い!
    そんなユーザーにもエンジニアにもモテる爆軽画像への研究・発見報告です
     

    基本の基本

    画像の重さは1画面合計100k以内
    PNGは使えないとおもっておk
    画像にwidthとheightを指定しないのは死亡フラグ

    元画像が複雑な場合ライブトレースで爆軽に

    私が現在担当している英雄になりたい!は魅力的なキャラクターたちが登場する戦争ゲームです
    繊細なキャラクターデザインでそれが重厚な世界観を作り出す大事なキーになっています
    db_mari.jpg

    db_ruslan.jpg

    ところがアニメ塗りと違って色数が多すぎて減量に不向きです。どうしても重くなってしまいます
    なんとかならんかなと試行錯誤した結果
     

    イラレのライブトレース機能が効果がありました

    見た目の印象は大きく変わりありませんが


    db_line_a.jpgdb_line_b.jpg

    db_line_before.jpg

     

    db_line_after.jpg

    拡大してみるとパスでトレースされています。擬似的なアニメ塗り状態になったといえます

    これが何もしなかったときのヘッダー photoshop  jpg 画質80

    sample_a.jpg

    27.4kあります

    背景と人物にライブトレースをしたもの Fireworks書き出し

    sample_c.jpg

    12.6 KB

    これとか3kです

    sample_d.jpg

     

    感覚としては高機能なポスタリゼーションという感じです
    元素材が簡単な模様やアニメ塗りなどの場合はさほど必要なさそうですが
    人物や風景の写真等の場合試してみてはいかがでしょうか(・v・)-☆
     

    ちなみに「僕らの甲子園!」のヘッダーはなんと8Kです
    甲子園デザイナーの記事もUPされるとおもいますのでそちらも要チェックです
     

    などなどこんな感じの最近の発見報告でした。
    次回はここから更なる書き出し時の減量方法を報告します!なにかお役に立てばうれしいです。
    またなにか発見があったらご報告しますね!バイナラ!
     


    0 0


    納豆はわさび派のくにーです。こんにちは。

    みなさん雑誌って読みますか?

    個人的には先日、大好きな雑誌 Lmagazine(休刊)が
    webにて復活していたのが衝撃でした。

    そんなこんなで、
    今回はデザイン系雑誌をまとめてみたいと思います。

    では、つづきからどうぞー。

     

    Web Designing (ウェブデザイニング) 2010年 09月号 [雑誌]

    Web Designing


    http://book.mycom.co.jp/wd/
    アイデアから技術トレンドまで。
    web creatorsなき今web系専門雑誌最後の生き残り。(たぶん)

    MdN (エムディーエヌ) 2010年 09月号 [雑誌]

    MdN


    http://www.mdn.co.jp/di/
    ザ・定番。読んで使えるテクニックの即効性が高いイメージ。
    書籍ももりもり出てます。

    + DESIGNING (プラスデザイニング) 2010年 08月号 [雑誌]

    + DESIGNING


    http://www.plus-designing.jp/
    毎号テーマ事にデザインに迫る、読み物としても面白い雑誌。

    デザインノート No.31 (2010)--デザインのメイキングマガジン (SEIBUNDO Mook)

    デザインノート


    http://design-note.jp/
    アートディレクターの仕事の思考プロセス、体験談などが覗ける。

    AXIS (アクシス) 2010年 08月号 [雑誌]

    AXIS


    http://www.axisinc.co.jp/
    大胆な分析、大人っぽい誌面が特徴。
    表紙は各業界人のポートレートで構成されている。アクシスフォントも有名。

    +81 VOL.49 European Graphics issue

    +81


    http://www.plus81.com/
    世界中からインスピレーションを集めたバイリンガル雑誌。
    世界各国で発売されている。ビジュアル重視。

    QUOTATION Worldwide Creative Journal


    http://www.quotation.jp/
    「クリエイティブ」という視点から世界の情報を発信。
    インタビューなど。

    idea (アイデア) 2010年 09月号 [雑誌]

    idea


    http://www.idea-mag.com/
    分厚さを見ればどれだけ特集に力をいれているかわかる(かもしれない)
    作品集的一冊。

    ブレーン 2010年 09月号 [雑誌]

    ブレーン


    http://ec.sendenkaigi.com/hanbai/magazine/brain/
    印刷物・CM・WEBなど最前線を伝える情報が満載。

    nikkei.jpg

    NIKKEI DESIGN


    http://nd.nikkeibp.co.jp/nd/
    ビジネス・経営から読み解くデザイン方法論。

    Casa BRUTUS (カーサ・ブルータス) 2010年 09月号 [雑誌]

    Casa BRUTUS


    http://magazineworld.jp/casabrutus/
    建築を中心にインテリア、デザイン、アートと楽しめるマガジン。

    宣伝会議 2010年 8/15号 [雑誌]

    宣伝会議


    http://ec.sendenkaigi.com/hanbai/magazine/sendenkaigi/
    世の中の流れをマーケティングの視点から把握するならこれ。

    広告 2010年 07月号 [雑誌]

    広告


    http://www.kohkoku.jp/
    博報堂が送り出す、広告・ビジネス・コミュニケーションを読む。

    クリネタ No.9 ~活字で読むデザインマガジン

    クリネタ 活字で読むデザインマガジン


    http://crineta.com/
    詳しくは、1号目の表紙をご覧下さい。

    illustration (イラストレーション) 2010年 09月号 [雑誌]

    illustration


    http://www.genkosha.co.jp/il/
    イラストレーション専門雑誌。
    誌面上で開催されているザ・チョイスはイラストレーターの登竜門。

    COMMERCIAL PHOTO (コマーシャル・フォト) 2010年 09月号 [雑誌]

    COMMERCIAL PHOTO


    http://www.genkosha.co.jp/cp/
    写真業界で仕事をしている人にとってもかかせない一冊。



    はい、境界線曖昧にあつめてみました。
    デザイン系雑誌といっても、技術中心、アート系、広告寄り、全般的なものといろいろありますね。
    これも良い機会なのでに読んだことがない雑誌があれば手に取ってみてはいかがでしょうか?

    ちなみに冒頭でもふれていますが、納豆+わさび+タレ(もしくは醤油)は、
    カラシで食べるよりも、さっぱりしていておいしいので、皆さん試してみて下さいね!


    0 0

    いつも元気です!夏バテ知りません!barimiです。

    暑さもだいぶ和らいできていますねえ。
    そうです。今日は8月30日。もう、夏休みも終わりですよね!

    宿題終わってますか?

    終わってないですか?

    ある意味 \(^o^)/オワタ ですか?

    そんな困ったちゃんに、おすすめのサービスをこの夏休み終了直前にご紹介します。

    夏休みの宿題の定番。絵日記&読書感想文を自動生成!?その名も…

    deki.png

    絵日記と、読書感想文を自動生成するサービス「DEKI NOTE」。

    絵日記モードは、簡単な質問 に答えるだけで、文章とそれにあった絵を自動で生成してくれます。

    読書感想文モードは、作品名、文字数など指定すると、勝手に感想 文を作ってくれます。

    ただし、悪魔との秘密の取引とありますので、あくまでジョークサービスとしてお使いください!

    作文のタイトルつくるなら!

    hon.png

    作文のタイトルに悩んだらこのサービス。
    その名も 「売れる!書籍名メーカー 魔法のホンデレラ」。

    キー ワードを入力して、ジャンル、タイトルの長さを指定するだけで、ちょっと売れそうなタイトルを生成してくれます。

    例えばこんな
    「夏休み+ゲーム攻略本+普通」なら「夏休みのザ・コンプリートガイド
    「夏休み+ビジネス・経済・ キャリア+短め」なら「ハローワーク2夏休み
    などなど。

    勝手に タイトルを自動生成してくれます!

    ジョークサービスですよ!

    今回紹介しましたものは、あくまでジョーク サービスです。ご利用は計画的に!
    最終的には、「夏休み 宿題 言い訳」 なんかでググると、イロイロ出てきますよ!

    インターネットって便利ですね!


    0 0

     

    どうもこんにちは!

    カヤック意匠部新米イラストレーターのウシキです!

    今回はwebデザインではほぼほぼ使うシチュエーションのないillustratorのこの機能!

    グラデーションメッ〜シュ!!!をご紹介したいと思います!

    illustratorではかなり初期のバージョンからあるのに全然つかわないなぁって人もいらっしゃるのではないでしょうか!

    Photoshopでできちゃうからいらないんじゃない?

    印刷向きでweb向きではないんじゃない?

    って思いがちですが、

    ってその通りですが、

    意外と使い方覚えちゃえば凄く簡単に早く便利にwebにも印刷にも対応できちゃう綺麗なオブジェクトがつくれちゃう!

    それがグラデーションメッ〜シュです!


    使い方にはいくつかコツが必要です!実際にグラデーションメッシュで描いたイラストを用いて説明していきます!

    下のイラストをご覧ください。今朝会社にくる前に30分で作ったものです。

    下書きもイメージも何もなくゼロからillustratorを立ち上げたときから30分!実に早く!簡単!誰でもできる!

     

     

     

     

    何でこのイラストを描いたかは言及いたしませんが、

    このイラストグラデーションメッシュのコツを2つ使って描いてます。

    では具体的にみていきましょう!

    下の図がパスの構造です。

     

     

     

     

    グラデーションメッシュのコツその1!

    メッシュの方向を決める4つのアンカーポイント!

    描いた円を選択して[グラデーションメッシュ作成…]をすると下の図のようになります。

    このやり方でも多少立体感はでますが、決まりきった格子で自由度が低いです。

    そこで今回はより丸みを出すために下図の様な方向に格子を入れてます!

    これどうやるのかというと!!!!!!

    描いた円に2点アンカーポイントを追加します。

    その2点と元々円を構成していた2点、合わせた4点を[ダイレクト選択ツール]で選択します。

    その状態で[グラデーションメッシュを作成…]をすると、その4点を起点にメッシュが作られます。

    このやり方を使えば自由に光の方向を考えてメッシュの方向を決められるのです。

    次回はもう一つのコツを上のイラストの体の部分を例に説明していきま〜す!

    お楽しみに!

     

     

    webデザイナーにおれはなる!


    0 0

    夏が終わっちゃいそう!

    どうも、いつも元気なbarimiです。

    あっという間に9月です。今年は猛暑が続きましたね。
    由比ガ浜の海の家も昨日で終わりだったようです。

    さて8月の人気記事をまとめます。

    8月の人気記事 TOP10

    デザイナー必見!ポータルのポータル【モバイルデバイス編】

    歴代の人気記事「デザイナー必見 ポータルのポータル」のモバイルデバイス編。
    携帯やiPhoneのデザインポータルサイトをまとめたものです。

    【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】

    こちらは検証記事。iPhone4では、どのフォーマットの画像が一番きれいに見れるかの検証したものです。

    BMKidsから第1弾サービス「安心レーダー」リリース!

    とあるクラスタに「こんな恐ろしいものつくりやがって!」と悲鳴を続出させた、iPhoneアプリの解説記事です。

    【新人Webデザイナー向け】Webドリル vol.1: フォームを使い分けてますか?

    UIの基本が学べる記事です。続きが期待できますね。

    【今も昔も】デザイン系雑誌まとめ【情報源】

    デザイナー必見の、アイデアソースになる雑誌をまとめたものです。

    iPhone Webアプリテンプレート(CSS Nite Vol.40 reprise)

    こちらは、セミナーのフォローアップ記事。iPhoneのテンプレートが紹介されています。

    デザイナー必見 ポータルのポータル

    デザインポータルサイトをまとめたものです。歴代PV1位の記事。まだ人気があります。

    はてなスターをう●こに変えてみました

    はてなスターハックの記事。はてなスターとう●こが気になる人には必見です。

    CS5の新機能「コンテンツに応じる」は、どれくらい応じてくれるのか。

    Photoshop CS5の新機能をユニークに紹介。CS5ってすごいなあ。と改めて感じました。

    世界をリードするフランスのPV特集

    VJをやっているデザイナーがまとめた記事。フランスはPVだけでなく、デザインもきているようです!

    まだまだ暑い日が続きそうですが、みなさまお体にはお気をつけてください!

    面白法人カヤックでは、様々な切り口でデザインを語れるデザイナーと、
    技術検証をしながらもバリバリとコードを書くマークアップエンジニアを募集しています!


    0 0

    9月は山に登ろう!

    やっほー、山と大仏が好きなねじです。

    9月になりましたね。これから秋にかけて家族や友達と、山に登る方も多いことでしょう。
    本日は、そんな山登りするあなたにおすすめのアプリを(山だけに)3個ご紹介します!!!

    いま見えている山の名を教えてくれる「Peak.ar」

    100902_nezi_yama_02.jpg

    黒部ダムで有名な北アルプスを訪れたとき、遠くに見える山々の中に「野口五郎岳」という山があるのを知って驚いたものです。なんでも歌手の野口五郎さんの名前の由来は、この山からきてるとか…。
    山にはドラマがある。山の名前にもドラマがある。
    もし遠くに見える山々の名前を一望できたら…。そんなニッチなニーズに答えてくれるアプリが「Peak.ar」。

    GPS機能とコンパス機能によって、目の前の山の名前と標高を教えてくれます。
    さらに、衛星GPSを使用しているため山奥でも使えるそうです。
    これで山登りがもっと有意義になること間違いなし!

    ダウンロードはこちらから

    あなたが歩いた登山ルートを教えてくれる「iTrail」

    100902_nezi_yama_01.jpg

    GPSをつかって、あなたの経路のルートや速度、距離、標高などを記録するアプリです。
    本来はランニングやドライブの記録などを残して楽しむような使い方をするのですが、
    標高も記録されるので、山登りでつかうのは相性がよさそうです!

    ダウンロードはこちらから

    山博士になろう!「季節の野草・山草図鑑 for iPad」

    100902_nezi_yama_03.jpg

    野草にくわしい人と山を歩くと、山登りが10倍楽しくなります。
    この草は食べれるんだよとか、この花は秋になるときれいだよとか。

    そんな山博士が周りにいないあなたには、このアプリがオススメです!
    色、大きさ、季節から調べられる野草図鑑。
    花の名前が分からなくても探せるというのは魅力ですよね。
    ただし、iPadなので、あまり本格的な山登りには向いていないかも

    ダウンロードはこちらから

     

    ちなみに9月23日は、東京がほこる名山「高尾山」にみんなで登って、山について語る「ねじ山」というイベントが催されます。興味のある方は、山アプリを引っさげて参加されてみてはいかがでしょう?

    面白法人カヤックでは、剣山のごとく鋭い感覚をもったデザイナーと、
    楯状火山のごとくな裾野が広く安定感のあるコードを書くマークアップエンジニアを募集しています!
    まだ誰も見ぬ、新しい山に一緒に登りましょう!


    0 0

    めちゃイケの新メンバーよりマークアップエンジニアでしょ

    recruit.png

    業務拡大につきマークアップエンジニア募集中です。
    html5もCSS3も書き放題だったり、ソーシャルゲームも作れたり、リア充できますよ。

    使用言語・スキル

    • html、CSSが好き
    • javascriptもちょっと好き
    • 携帯コーディングも嫌いじゃない
    • うんこネタに抵抗がない

    ちょっと興味があるかも、という方がいましたら、こちらからエントリーくださいませ!

    お願い

    もしお友達に、興味がありそうな人がいたら、このオーディションエントリーを教えてあげてくださいっ!


    0 0

     

    こんにちは。カヤックで携帯サイトのコーディング、運用などをやっているフィリップです。

    携帯コーディングでtableを使うと、ページ構成の表現度が結構広がりますので、今回は事例を使って、その基本的な使い方落とし穴を紹介したいと思います。

     

    tableタグは新しい機種では問題なく使えますが、古い機種の場合では効かないこともあるので、今回は以下の端末を対象とします。また3キャリア向けにxhtmlは1ソースにしています。

    【docomo 902以降端末、au WIN端末、softbank 3G端末】

     注意:tableの入れ子をすると、表示されない場合があるので(au端末の一部)、tableの入れ子は避けた方がよいでしょう。

    【事例1】メニューなどのテキストを綺麗に並べたい時

    画面のスクリーンショット

    テキストメニューを綺麗に並べる

    html

    <table width="100%">
    <tr>
    <td width="50%">
    <span style="font-size:x-small;">&#63228;<a title="タッチ帳" accesskey="2" href="hoge"><span style="color:#764a0d;">タッチ帳</span></a></span>
    </td>
    <td width="50%">
    <span style="font-size:x-small;">&#63296;<a title="ショッピング" accesskey="3" href="hoge"><span style="color:#764a0d;">ショッピング</span></a></span>
    </td>
    </tr>
    <tr>
    <td width="50%">
    <span style="font-size:x-small;">&#63297;<a title="きのこミックス" accesskey="4" href="hoge"><span style="color:#764a0d;">ミックス</span></a></span>
    </td>
    <td width="50%">
    <span style="font-size:x-small;">&#63298;<a title="キノコいじり" accesskey="5" href="hoge"><span style="color:#764a0d;">いじり</span></a></span>
    </td>
    </tr>
    <tr>
    <td width="50%">
    <span style="font-size:x-small;">&#63299;<a title="ゲーム" accesskey="6" href="hoge"><span style="color:#764a0d;">ゲーム</span></a></span>
    </td>
    <td width="50%">
    <span style="font-size:x-small;">&#63300;<a title="コンテスト" accesskey="7" href="hoge"><span style="color:#764a0d;">コンテスト</span></a></span>
    </td>
    </tr>
    <tr>
    <td width="50%">
    <span style="font-size:x-small;">&#63301;<a title="クローゼット" accesskey="8" href="hoge"><span style="color:#764a0d;">クローゼット</span></a></span>
    </td>
    <td width="50%">
    <span style="font-size:x-small;">&#63302;<a title="コンチログ" accesskey="9" href="hoge"><span style="color:#764a0d;">コンチログ</span></a></span>
    </td>
    </tr>
    </table>

    解説

    • tableを使う際の重要なポイントは<td>内のテキストを<span style="font-size:x-small;color:#764a0d;">などで囲んで、<td>毎にテキストのサイズと色を指定することです。
      通常はページ全体を一つの<div>で囲んで、テキストのサイズと色を指定しますが、docomoの場合はtableのテキストにその指定が適用されずデフォルトのサイズと色になってしまうので、少々面倒ですが、<span>で毎回指定し直す必要があります。
    •  ここではページの全幅を使うので、tableの幅はwidth="100%"で指定します。そして列が二つあるので、tdの幅はwidth="50%"で指定します。
      ピクセルではなくて、パーセントで指定することで、画面の広いVGA端末にも対応出来る指定になります。
    • htmlにある「&#63228;」などは絵文字になりますが、これは開発環境によって指定が異なるので、絵文字の記載方法については担当のプログラマーに確認してください。ちなみに、docomoの絵文字は字と同じ扱いになるので、table内では同じくサイズと色の指定をしないとデフォルトのものになってしまいます。

    【事例2】画像の横並び

    画面のスクリーンショット

    画像の横並び

    HTML

    <table width="100%">
    <tr>
    <td align="center" width="33%">
    <span style="color:#9B6800;font-size:x-small;">【2位】</span><br />
    <img src="hoge" width="74" height="74" alt="オランダ" /><br />
    <a href="hoge"><span style="color:#a30b58;font-size:x-small;">オランダ</span></a><br />
    <span style="color:#024EE3;font-size:x-small;">ネーデルラント</span>
    </td>
    <td align="center" width="33%">
    <span style="color:#9B6800;font-size:x-small;">【3位】</span><br />
    <img src="hoge" width="74" height="74" alt="メガネッコ" /><br />
    <a href="hoge"><span style="color:#a30b58;font-size:x-small;">メガネッコ</span></a><br />
    <span style="color:#024EE3;font-size:x-small;">ボブ</span>
    </td>
    <td align="center" width="33%">
    <span style="color:#9B6800;font-size:x-small;">【4位】</span><br />
    <img src="hoge" width="74" height="74" alt="ローズ" /><br />
    <a href="hoge"><span style="color:#a30b58;font-size:x-small;">ローズ</span></a><br />
    <span style="color:#024EE3;font-size:x-small;">クラシック</span>
    </td>
    </tr>
    </table>

    解説

    •  画像が3つあるので、3つのtdに配置して、それぞれ<td align="center" width="33%">で指定すると綺麗に横の3分割に並べます。
    • QVGA端末の画面幅は240pxなので、3つの画像を並べる場合、それぞれ80px以下にしないと潰れて見えてしまいます。画面のスクロールバーなどで240pxの幅がない機種もあるので、75pxぐらいにしておくことが無難でしょう。
    • td内の画像の高さがバラバラの場合で、tableの上部に揃いたい場合は<td align="center" width="33%" valign="top">で指定してください。

    【事例3】画像とテキストの横配置

    画面のスクリーンショット

     画像とテキストの横配置

    HTML

    <table width="100%">
    <tr>
    <td width="60" valign="top">
    <img alt="コロボックルガチャコン" src="hoge" height="60" width="60" />
    </td>
    <td valign="top">
    <a title="コロボックルガチャコン" href="hoge"><span style="font-size:x-small;color:#fff000;">コロボックルガチャコン</span></a><br />
    <span style="font-size:x-small;color:#ffffff;">昔から森の奥に住んでる妖精さんたち。ファションセンスも独特で模様使いがカワイイコーデ。<br />
    (2010/8/31~9/28)</span>
    </td>
    </tr>
    </table>

    解説

    • PCであれば画像の回りこみはfloatなどでやりますが、携帯だと3キャリアをfloatでやると少しややこしい記載になるので、シンプルにtableでやることが多いです。
    • 画像など、幅が決まってるものをtdに入れる場合はtdのwidthをピクセルで決めれます。そうすると、画面の残りの幅はテキスト用になるので、バランスがよくなります。

    参考のためにalignとfloatを使った画像の回り込み方法も下記に書いておきます。この方法ですと、テキストが長い場合は画像の下にテキストが来ます。tableですと、テキストが長くても、画像の下には行きませんので、どういう見た目にしたいかによっては方法を選べます。

    <div>
    <img src="hoge.gif" style="float:left;" align="left" />
    テキストテキストテキスト。
    <div clear="all" style="clear:both;"></div>
    </div>

    【事例4】コンテンツの左右にマージンを空けたい場合

    画面のスクリーンショット

    コンテンツの左右のマージン

    HTML

    <table width="95%" align="center" bgcolor="#FF7DAA">
    <tr>
    <td align="center"><span style="font-size:x-small;color:#FFFFFF;">コンチはオシャレが大好き</span></td>
    </tr>
    </table>

    解説

    • 携帯ではmarginなどが基本的に使えないので、テキストが面の両端にくっ付いてしまいます。どうしても両端にスペースを空けたい場合はtableにテキストなどを入れて、<table width="95%" align="center">で指定をすれば、コンテンツの左右にマージンのようなスペースが作れます。
      ただし、全ページでこの対応をするのは大変なので、tableタグを使ってテキストの左右にスペースを空けることはあまりオススメしません
    • センターに寄せたtableにさらに背景色などの設定をすれば、上記のスクリーンショットのように、見出し的な使い方も出来ます。

    【事例5】画像とテキストの横配置

    画面のスクリーンショット

    表を組みたい時

    HTML

    <table width="100%" bgcolor="#0376BE">
    <td width="25%" align="center" bgcolor="#003366">
    <span style="color:#FFFFFF;font-size:x-small;">毒</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">電</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">双</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">幻</span>
    </td>
    </tr>
    <tr>
    <td width="25%" align="center" bgcolor="#003366">
    <span style="color:#FFFFFF;font-size:x-small;">星</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">双</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">双</span>
    </td>
    <td width="25%" align="center" bgcolor="#000000">
    <span style="color:#FFFFFF;font-size:x-small;">毒</span>
    </td>
    </tr>
    </table>

    解説

    •  tableを表として使うのは結構基本的なことですが、3キャリアで同じようにborderを表示させるのは難しいので、次の方法で対応しています。
      携帯ではtableとtdの間に1pxぐらいにスペースが空くので、tableに背景色を敷いて、そしてtdに別の背景色を敷けば、borderのような線を作ることが出来ます(線の色はtableの背景色になります)。

    まとめ

    携帯でtableタグを使うとページの構成の幅が広がります。しかし、携帯独自の仕様になれないと、意図していない結果になる可能性があるので、上記のようなことを覚えておくとよいかもしれません。

    このページに載っているスクリーンショットについて

    このページで使われているスクリーンショットは「ポケットフレンズ コンチ」という携帯サービスからのものです。
    「コンチ」はちょっぴりバカで可愛くて、癒してくれる珍感覚ペットです。飼ってみたい方がいれば、下記のQRコードからどうぞ♪

    ポケットフレンズ コンチ

    PCでの紹介ページはこちらから。
    http://konchi.kayac.jp/pc/

    採用情報について

    面白法人カヤックでは、携帯サービスのデザイン・コーディングをしたい方を募集しています!


    0 0

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´)

    カヤックでは、デザイナーに比べてMEが絶滅危惧種的な人数なので、
    デザイナーもHTMLコーディングをしてくれています。
    (いつもありがとうございます!)

    そんなワケで、本格的にHTMLコーディングはしないけど、
    ちょこっとしたページなら組みますっていうデザイナー向けの、
    「コレだけ読めばすぐできる」シリーズを始めました。

    第一回は「携帯コーディング」についてです。

    携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、
    最低限の内容であれば覚えることも少ないですし、
    一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ!

    携帯コーディングの基本

    基礎の基礎

    • 文字コードはShift-JIS
    • CSSはインラインで指定(タグに直接style属性を追加する)
    • 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内)
    • 画像はgifかjpg(pngはNG)
    • 拡張子は.html(プログラムが入る場合は.php)

    docomoでCSSを使う

    Content-Typeをxmlに変換しないとdocomoでCSSが適用されません。
    下記のいずれかの方法になりますが、.htaccessの方が簡単です。

    .htaccessでAddTypeする

    なんだか難しそうに聞こえますが、メモ帳などで以下の1行を記述したファイルを作成し、
    ファイル名を「.htaccess」に変更したものを、ルートフォルダに置くだけです。簡単!

    AddType application/xhtml+xml .html
    

    スクリプトでContent-Typeを指定

    phpなどの動的コンテンツでは、ヘッダの出力が必要になるのでプログラマにお願いしましょう!

    header("Content-type: application/xhtml+xml;charset=Shift_JIS");
    

    上記の方法が使えない場合

    静的ページで.htaccessが使えないサーバや、ローカルで確認したい場合などは、
    とりいそぎHTMLの拡張子を.htmlから.xhtmlにするとdocomoでもCSSが適用されます。

    携帯コーディング独自テクニック

    共通項目

    DTD、xml宣言

    小難しいことは理解しなくても大丈夫!
    携帯サイト用テンプレートをそのまま使いましょう。

    div, span, table, brだけでマークアップ

    古きよきtableコーディング時代のように、見た目が再現できればそれでいいのです。
    pやul, ol, dlなどは表示が崩れる原因にもなるため、むしろ使わないでください。

    ※古い機種ではtable非対応のためレイアウトが崩れるので使えません。
    しかし実際はほとんどの案件でtableを使用しています。(事前に対象機種を確認!)

    tableの入れ子は絶対禁止

    tableを入れ子にすると、一部機種でその中身のコンテンツが消えてしまいます。

    カラーコードは6文字で

    #000000などの6文字のカラー指定を、#000などと省略して記述すると、
    意図した色にならない場合があるので、省略せずに必ず6文字で指定しましょう。

    ページ内リンクはnameとidで

    aタグにnameとidを両方指定しないと、機種によってリンクできません。

    <a name="top" id="top"></a>

    テキスト装飾

    文字サイズは2段階まで

    3キャリアで違和感なく表示できるのは2段階までです。

    x-smallとmediumの組み合わせがベスト。
    ベースをx-smallで指定して、大きくしたい箇所にだけmediumを指定すると楽です。

    xx-smallとmediumの組み合わせは、softbankでxx-smallが小さくなりすぎるのであまりオススメしません。

    マーキーにはmarqueeタグを使わない

    docomoのXHTMLではmarqueeタグが使えません。
    (HTMLで書かれている場合はmarqueeタグが使えますが、今度はCSSが効かなくなります。)

    そのため、以下のようにdivにstyleを指定することでマーキーの動きを実現します。

    <div style="display:-wap-marquee; -wap-marquee-loop:infinite; background-color:#xxxxxx; color:#xxxxxx;">マーキーサンプルテキスト</div>

    リンクの下線色はaとspan両方に指定

    ベースのリンクカラーはhead内のCSSで指定しますが、
    一部のみリンクカラーを変えたい場合は、aの中にspanを入れて文字色をCSSで指定します。

    <a href="#"><span style="color:#xxxxxx;">リンク文字</span></a>
    

    ただしこの方法だと、下線だけがベースで指定したリンクカラーになってしまうので、
    外側のaにもCSSでカラーを指定します。

    <a href="#" style="color:#xxxxxx;"><span style="color:#xxxxxx;">リンク文字</span></a>
    

    ※iモードブラウザ1.0は、a要素へのCSSが効かないので、
    上記の方法でも下線の色を変えることはできません。諦めましょう。

    td内で文字サイズと文字色の再指定が必要

    全体のdivに対して、文字サイズや文字色を指定していても、tdの中でリセットされてしまいます。
    各tdの中のテキストを、spanやdivで囲み、文字サイズや文字色を個別に指定し直す必要があります。

    レイアウト

    背景画像はbodyのみ

    docomoでは、CSSのbackground-imageがbody以外対応していません。

    CSSのmargin、paddingは使えない

    余白の調整は、<br>か透過gifで行ないますが、透過gifを多用すると重くなるので、極力<br>で指定します。
    どうしてもデザイン的に必要な箇所のみ、透過gifで調整しましょう。

    ただしimgだけは、3キャリア全てでCSSのmarginが使えるので、
    画像とテキスト間の余白などで使うことができます。

    回り込みには、floatとalignの両方を指定

    CSSのfloatとHTMLのalignの両方を指定しないと、
    3キャリアすべてで回り込みさせることができません。

    画像左、テキスト右

    <div><img src="x.jpg" width="x" height="x" alt="" align="left" style="text-align:left;" />テキストテキストテキスト</div>

    テキスト左、画像右

    <div><img src="x.jpg" width="x" height="x" alt="" align="right" style="text-align:right;" />テキストテキストテキスト</div>

    回り込み解除

    <div><img src="x.jpg" width="x" height="x" alt="" align="right" style="text-align:right;" />テキストテキストテキスト</div>
    <div style="clear:both" clear="all"></div>
    

    ラインはdivと透過gifで

    境界線にhrタグを使うと、キャリアごとにCSSの指定方法が違ったり、マージンが消えなかったりと扱いにくいです。
    そのため、通常はdivと透過gifでラインを表現することが多いです。

    <div style="background:#xxxxxx;"><img src="./img/clear.gif" alt="" height="1" /></div>

    auでの隙間にはdivの入れ子で対処

    auではdivとdivの間に隙間が空いてしまいますが、仕様です。
    隙間が目立つ場合は、外側をさらにdivで囲んで背景色を指定すると、隙間が目立たなくなります。

    画像を隙間なく並べるにはtableを使う

    画像を並べて隙間ができる場合は、tableのセル1個1個に画像を入れると隙間なくピッタリになります。

    改行に注意

    imgなどのインライン要素は、改行がスペース扱いになって隙間ができます。
    謎な隙間ができた場合は、前後の改行を消してみましょう。

    tableの中央揃え

    tableを中央揃えにするには、外側のdivとtable自体にCSSで以下のように記述します。

    <div style="text-align:center;">
    <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;"><tr><td></td></tr></table>
    </div>
    

    フォーム

    formには必ずactionとmethodが必須

    空でもいいので、<form action="" method="">のように書いておかないと、
    docomoでその中にあるinput要素が消えてしまうので注意。

    input type="image"は使えない

    デフォルトの送信ボタン(input type="submit")ではなく、画像ボタンにしたい気持ちはわかりますが、
    携帯ではinput type="image"が使えません。諦めましょう。

    フォームパーツの横並びはtableを使う

    <input type="text" /><input type="submit" />と記述した場合、

    [テキストボックス] [ボタン]

    という横並びのレイアウトにしたいのに、

    [テキストボックス]
    [ボタン]

    と折り返してしまうので、tableタグを使って横並びにしましょう。

    絵文字

    埋め込み方

    i絵文字を使って絵文字を埋め込んだ場合は、以下のように表示されます。

    • docomo
      そのまま表示される
    • au
      同じ意味の絵文字が表示される
    • softbank
      全然関係ない絵文字が表示される…(´・ω・`)

    softbankは、もうほんとにビックリするくらい関係ない絵文字が表示されるので、
    一時的な確認などでしかi絵文字は使えないと思ったほうがよいです。

    絵文字を使う場合は、phpなどのプログラムを用いてキャリア毎に変換が必要です。
    プログラムを入れられない場合は、絵文字は諦めて思い切って画像にしましょう。
    (ページの容量が増えるのでオススメはできませんが、3キャリア1ソースでは不可能です。)

    絵文字のカラー

    docomoの絵文字はテキストなので、全体のdivなどでフォントカラーを指定していると、
    その中の絵文字はその色となり、本来の絵文字の色ではなくなります。

    全体でフォントカラーの指定をしないか、もしくは絵文字ひとつひとつをspanで囲んで、
    CSSでカラー指定する必要があります。

    Flash、JavaScript

    Flash

    HTMLの中の一部にFlashを埋め込む場合は、Flash内でボタン操作はできません。
    操作させたい場合は、そのページをフルFlashにする必要があります。

    JavaScript

    基本的には使えません。

    表示確認

    実機でのチェックは必須

    携帯サイトをPCで表示するとき、FireMobileSimulator(Firefoxのアドオン)をよく使いますよね。
    しかし、FireMobileSimulatorはUAの偽装や絵文字の表示など、
    簡易的な表示チェックはできますが、実機での表示を完全に再現するものではありません

    面倒でも、各キャリアの実機でのチェックは必須です。
    iモードHTMLシミュレータを使って、まずdocomoでの見え方を確認して、
    大きな問題を潰してから、携帯の実機で確認すると効率的です。

    iモードHTMLシミュレータは、docomoの実機とほぼ同じ見え方になる上に、
    画面キャプチャも取れるし、ソースも表示できて便利です。

    専門業者に依頼も検討

    携帯はPCの比ではないほど、機種による表示の違いが激しいです。
    検証機が各キャリアに1台ずつあればいいというものではありません。

    ほぼすべての携帯端末を保有している専門業者もあるので、
    必要であれば確認作業を依頼することも検討するといいですね!

    携帯コーディング用テンプレートのダウンロード

    ややこしいxml宣言DTD、head内での指定や.htaccessまでセットされているので、
    すぐにコンテンツ部分のコーディングをスタートできますよ!便利!

    >> ダウンロード

    • 全ての機種で動作確認しているわけではないので、動作保証はできません。
    • 特定の機種で不具合などありましたら、ご連絡いただけるとうれしいです。

    最後に・・・!

    臨機応変にコーディングもすいすいできちゃうデザイナーを絶賛募集中

    そして、絶滅危惧種なマークアップエンジニアも超募集中です!
    アルファブロガーなリーダーや、コーディングコンテストで受賞歴があるギャル男
    魅惑ボイスのセクシーお姉さんたちが、ご応募お待ちしております!(。◕‿◕。)

    >> とりあえず募集要項だけでも見てみる


older | 1 | 2 | (Page 3) | 4 | 5 | .... | 12 | newer