アプリケーションアイコンを作るときに参考になるサイトまとめ
こんにちは！デザイン担当の福島です。 今日は、わたしがアイコンを作成する際に見る参考サイトの紹介をしたいと思います。 あの機能のシンボルってなんだっけ？ってときに見る。 あれ、この形って一般的なのかな？と、作っているときに不安になることはよくありますよね！心配になったときに検索すると一般的に連想される形がわかって捗ります（一般的なシンボルもプラットフォームによって多少違ってくるので、数が多い = 正解とはいいきれませんが） たとえば『タブ』ってどんな形で表すのが一般的なんだろう？というような疑問にすぐに答えてくれます。 FIND ICONS 色んな検索に対応しているので、がっつり調べたいときはここで検索します。 ICON FINDER さくっと見たいときはこちら！16/24/32/48/64/ 等の一般的なサイズで絞りこめるので 16px で作られた、あの複雑な形のアイコンがみてみたい！な
3分でそれなりに分かる Web フォント
こんにちは。Web 担当の真谷（シンガイ）です。 先日「Web Font ってどうなの？」という非常にアバウトな問いをもらい、Web フォントについて説明する機会がありました。 今回はその時説明した3分でそれなりに分かる Web フォントについて記載します。 Web フォントとは？ CSS2 のユーザーの PC にインストールされているものを指定するものと違い、サーバー上にあるものを利用するフォントです。使いたいフォントファイルをサーバーに上げる・Web サービスから取得する事で、柔軟にフォントを変えることが出来ます。 Web フォント 導入方法 Web フォント提供サービスから直接フォント読み込みして使うのが一般的です。 例を挙げるとデコもじやFONT+（フォントプラス）では 会員登録 Web フォントを使用するサイト（ドメイン）の登録 Web フォント提供サービスから発行されるコード設
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
眠れるデザインの才能とスキル（文字詰め、ベジェ曲線、色彩感覚）を見出す3つの Web ゲーム
皆さんこんにちは、イメージ担当の長谷川です。 突然ですが、みなさんは自分にデザインの才能があると思いますか？ 今回紹介するのはデザイナーに必須なスキルの文字詰め、ベジェ曲線の編集、色彩感覚が簡単にテストできて、しかも遊んでいるだけでマスターで来てしまうというゲームです。 プレイするだけであなたの眠れるデザインセンスが開花するかもしれませんよ。 少し前に流行ってたみたいですが、知り合いが Facebook で面白いと言っていたのでやってみました。 Kern Type, the kerning game http://type.method.ac/ 文字詰めのゲームです。両端以外の文字を直接ドラッグして文字と文字の間隔を美しく見えるように調整します。カーソルキーでも微調整できます。 これで良いなーと思った所で右下の「Compare」をクリックすると採点されます。全部で10問あります。 ちなみに
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
twitter 断捨離のススメ
こんにちは。坪内です。 twitter やってますか？ 私個人のtwitterアカウントは、ただひたすらIT系の情報収集をするために、いろんなメディアのアカウントや著名人のアカウントをフォローしていたんですが、どうもノイズが多いわけです。自分の興味のない話題でタイムラインが埋まってしまうこともしばしば。そうなると、なんとなくtwitterを見るのも億劫になって来て、しばらく放置、みたいなのが続くわけです。でも、個人的にTwitterほど情報収集に向いているメディアはないと思っているわけで、これはどうにかせねばと。 twitter断捨離やってみました とにかく、ノイズを減らして、スッキリさせる。を目的にして、3つの心がけを行い、twitter断捨離をやってみました。 断捨離というのは、「部屋の整理整頓と共に生活に調和をもたらそうとする、クラターコンサルタントやましたひでこの提唱する生活術 (
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
デザインのインスピレーションに最適！著作権フリーの挿絵が素敵な古書のパブリックドメインサイト
こんにちは、デザイナーの長谷川です。 デザインをする時、特に気を付けないといけないのが著作権。ちょっとイラストを描こうと思っても、元にする写真の著作権に注意しておかないと複製権の侵害になったりします。 そんな時に役立つのがパブリックドメイン。パブリックドメインとは著作物などの著作権が保護期間の経過により消滅したか、著作者が権利を放棄した状態のことです。基本的に誰でも自由に利用することができます。 海外にはそんなパブリックドメインとなった著作物を公開しているサイトが数多くありますので、時々参考にしています。 今回はその中から見てるだけでも楽しい古書の挿絵などをスキャンして公開しているサイトをご紹介します。 PUBLIC DOMAIN REVIEW 様々なアーティストたちが、パブリックドメインの作品を紹介するレビューサイトです。 Liam’s Pictures from Old Books 古
【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選
こんにちわ。坪内です。 突然ですが、この2年ほどで集めた素敵なネットショップを一挙公開しちゃいます。はっきり言って、この記事書いてるだけで、何度もポチリかけたくらい、素敵なアイテムがてんこ盛りです。既に知っているショップも多いと思いますが、知らないショップがあったら是非チェックしてみてください。 ちなみに、数が多すぎて説明文書くのは断念しました。カテゴリ毎には分かれているので、実際にご自身の目で確認してみることをオススメします。
【デザイン TIPS】背景を変えても境界線がボケないボタンを作るには
デザイナーの大西です。 Web ページなどで使うボタン作成の小技を書きたいと思います。 使い回ししやすいボタンを作るための手法のひとつとして、「違う色の背景に置いてもボケない境界線」が重要です。 淡い色合いのボタンを作る場合、そのボタンの周囲を囲む境界線も淡めの色になると思います。 淡めの境界線は白系の背景に置けばきれいに見えますが、濃い色や境界線に近い色の背景に移すと・・・ ボタンの周りがもやもやして見えませんか？ 背景とボタンの境界があやふやになるとボタンの立体感（クリックできそうな感じ）が損なわれてしまいます。 境界線のたかが 1px かもしれませんが、見た目だけでなく使い勝手にも関わる重要な部分です。 ■「違う色の背景に置いてもボケない境界線」の作り方 境界線のボケを防ぐには、暗い色を使って境界線を描き、白背景に置いてきれいに見えるように透明度を調節してやります。 暗い青色で描いた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
