【実録】アプリアイコンの作り方 〜２％のデザイン〜
気温がコロコロ変わり上着を来たり脱いだり忙しい今日この頃、 みなさんいかがお過ごしでしょうか？ 相変わらずご無沙汰しております(^〜^;) Jacminikです。 またまた、僕がデザインさせて頂いたアイコンがAppStoreに並びました！ パチパチパチ〜♫ …ってなワケで、 今回はとあるiPadアプリのリニューアルアイコン制作の過程を紹介させて頂きながら、アプリのアイコンがユーザーの目に留まるようになるまでに 開発者やデザイナーがどのように考え、 どのようにこだわって作っているのか？ を少しでもお伝えできればと思っています。 今回ご紹介する行程は飽くまでも一例ですし、 すべてのアイコンがこのように作られている訳ではないと思いますが ひとつの参考として読んで頂けたらうれしいです。 (最後にデザイン案件の受付についても宣伝させて頂きますので、開発者の方々も是非ご参考にしてみてくださいね。) ち
楽天から学べる日本的なWebアプローチ
学べるところが多い楽天ページWebデザインに関わる様々な情報やノウハウが世界中で共有されているとはいえ、お国柄は存在します。Yahoo!でも、世界共通にみえる UI コンポーネントがありますが、アメリカと日本と中国ではアプローチが異なります。情報にメリハリをきかせているアメリカ。今の話題を中央にたくさん詰め込めるように工夫してある日本。クリックをしなくても膨大な情報を消化することができる中国。ポータルサイトをひとことで言ってもやり方がいろいろあることが分かります。 各国の Yahoo! を見て「欧米はシンプルなのに、日本や中国はなんかごちゃごちゃしている」と感じた方はいるかもしれません。なぜそんな小さなところに情報を詰め込むのか、なぜページを整理しなのか、メッセージを絞ってメリハリをつけないのか、といった悩みを抱えるデザイナーもいるかもしれません。 日本らしい忙しいデザインの代表例としてよ
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
アイコンデザイン時に気をつけたい 10項目
デザイナーの大西です。 アプリケーションアイコン作成時に気を付けていることを書き出してみました。 基本的な事、作った後で気づく落とし穴、確認しておきたいことなど、アイコン作成の参考にしていただければ幸いです。 また、OS のガイドラインでアプリケーションアイコンについて言及されている場合が多いです。アングルや光源、影の付け方まで細かく定められているものもあり参考になるはずです。 ボリュームのある形 アイコンサイズの正方形でアイコンを囲んだときにどれだけ隙間が少ないか、がボリュームです。 ボリュームないと目立たないですし、隙間部分はクリックできない印象を与えます。ボリュームがあるだけでクリックしやすそうな安定感があります。 隙間の少ないアイコン（左）と隙間の多いアイコン（右） キーになる色は少なめに メインの色は 1色〜2色を目安に、不要な色を増やさない方が印象的に仕上がります。ただ、煩雑に
マンガ皿 : いつもの料理に迫力と感動を追加できるアイデア皿
デザイナー ツタイミカ氏制作の「マンガ皿」という作品。 ごく平凡な料理に存在感とストーリー性を与え、使い手のインスピレーションを刺激するアイデアに満ちたお皿。 料理に対しての器の重要性やそれが持つパワーというものを再発見させてくれます。 Photos : [ @aka_0_0_, Twitpic ] 最初はジョークレベルの一発ギャグ的なシロモノとしてのネタ扱いしていましたが、あらてめてよく考えて見てみると非常にアーティスティックな側面がこの作品にはあることが見えてきます。 つまりこのお皿にのせることで料理に意味というものを持たせることができるということ。 料理を頂く者にとってはその視覚的な効果によって平凡な料理が一変することでしょう。 そして料理を作る側も、皿との組み合わせで上にのせる料理をいかに作るかというインスピレーションを掻き立てられることでしょう。 そういう意味ではこの皿は料理人を
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
【PictBear】ブログ限定！定番アイテム。星と矢印ブラシ
こんにちわ、デザイン担当の福島です。 今日はブログ限定で PictBear のブラシを配布します！ 星と矢印の定番アイテムです。 見本で、以前六甲山に行ったときに撮った写真に、星ブラシを使ってみました★ 星ブラシセット ダウンロード(17KB) 矢印ブラシセット ダウンロード(8KB) 解凍したファイルを PictBear のウィンドウに直接ドラッグアンドドロップすることで、 ブラシを登録することができます。ぜひ使ってみてくださいね。 【PictBear ページ】 http://www.fenrir.co.jp/pictbear/ （PictBear トップページ） http://www.fenrir.co.jp/pictbear/brush/ （PictBear ブラシ・プラグインページ） それでは！これからも PictBear をよろしくお願いします。 フェンリルのオフィシャルアカウン
海外Webサイト・海外Web屋の特徴
2013年3月23日 Web関連記事, 海外情報 以前「日本向けのウェブデザインというのはあるのか?」という記事を読み、「逆に海外のサイトは具体的にどう違うかなあ？」と思ったので、私が感じた海外のWeb業界やサイトの違いを並べてみます。海外向けのWebサイト制作を考えている方、海外で働こうと思っている方の参考になればと思います！ ↑私が10年以上利用している会計ソフト！ 追記：ここで紹介する「海外」とは、私が滞在・就労経験のあるカナダとオーストラリアを指しています。 海外Webサイトの特徴 URLを直接入力 日本ではURLバーに直接入力する人は少ないかと思われますが、海外では目的のブランド名がわかっている場合、とりあえず「.com」をつけてWebサイトを開きます。海外で .com が人気な理由はこのへんにありそうです。そのため、新たに会社やサービスを立ち上げるときは、そのブランド名とドメイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
IDEA * IDEA