PCにインストールされているフォントを一覧表示してくれる『wordmark.it』 - デザインメモ
久々に自分のブックマークを整理しようと眺めていたら、お役立ちフォルダに入っていた『wordmark.it』というサイトがとても便利なのでご紹介します。helps you choose fonts!とサブタイトルに書いてあるように、フォント選びをお手伝いしてくれるんです！ サイトへアクセスして、真ん中の黒いボタン『load fonts』を押すだけで、なんとPCに入っているフォントを一覧表示してくれます。 フォントの名前はすべて英語表記なので、日本語フォントを探す時はちょっと大変ですが、上の黒いバーの真ん中に文字を入力すると、日本語表記だって確認できます。 フォントの管理アプリなどでじっくり眺めるのもいいですが、一覧で手軽にパッと見たいときにオススメのサイトです。ブックマークしたのは結構前だと思いますが、年月が経っても便利と思えるのはとても良いですね。
Facebookの「いいね！」ボタンの新デザインは背景色に気をつけたい - デザインメモ
先月の11月7日にFacebookの「いいね！」（Like）ボタンのデザインが新しくなりました。意外にもボタンのデザイン変更は初めてらしいです。発表された11月7日の時点で日本版は公開されていませんでしたが、今日改めて確認してみると、facebook developersのサイトで日本版も新デザインでボタンの埋め込みコードが取得できるようになっていました。 新デザインになったからといって、特別何かをすることは現状ありません。 ですが、私はボタンの「色」が気になりました。 この濃い青字に白抜きの文字をみた瞬間に気になったのは、ボタンを設置した場所の背景色。そこで、ボタンの見え方を背景色を敷いて簡単に検証してみました。 １、Facebookカラーと酷似した背景色の場合 まず、背景色がFacebookカラー（facebookのロゴに使われている色）に近い背景色だと以下の画像のようなことになるなあ
なぜデザイナーはMacを使うのか？ - デザインメモ
グラフィックやWebデザイナーはWindowsではなく、よくMacintoshを使います。私も当たり前のように専門学校の入学時にMacを購入しました。 なぜ、デザイナーはWindowsではなく、Macを使うんでしょうか？この問いには、意外と答えられない方も多いかもしれません。 デザイナーがMacを選ぶ最大の理由は“フォント” じつは、デザイナーがMacを選ぶ最大の理由は“フォント”にあるといいます。有名な書体が標準フォントとして入っており、また書体のデータ形式がMacは商業印刷に対応しています。 あの有名な『Helvetica』も標準フォント 例えば、『Helvetica』。デザインを学んだことがあるなら知らない人はいないだろうこのフォントは、Macには標準で入っていますが、Windowsには入ってません！（ちなみに、iPhoneにもシステムフォントとして使われています。） もしHelve
バレンタインやホワイトデー当日でも間に合う！スタバのソーシャルギフト「Starbucks e-Gift」 - デザインメモ
今年のバレンタインやホワイトデーはお店に出向くことなく、気軽にスマホやPCで贈ってみてはいかがでしょうか？ 2014年1月15日からスターバックスが「Starbucks e-Gift」というソーシャルギフトサービスをはじめました。 今回はこのサービスを実際に使ってみたのでご紹介します。 LINEやFacebbokでスタバのギフトが贈れるサービス「Starbucks e-Gift」を使ってみた Starbucks e-Giftはメッセージカードにスターバックスのドリンクを添えて オンライン上で友だちに贈ることができるギフトサービスです。 （公式サイトより引用） １、ギフトカードを作る まず「ギフトを贈るボタン」を押して、入力画面に進みます。贈り方を「Facebook」「LINE」「メール」の中から選ぶことができます。 下へスクロールして、次はカードを選びます。ハートが使われたバレンタインにぴ
夏とペットボトルと、Webデザインの配色 - デザインメモ
梅雨入りして、もう夏も目前！ ということで、夏っぽいWebデザインの配色を探すべく、 『夏っぽい！』と思うペットボトル製品から色を採取してみました。 パッケージの厳密な色ではなく、あくまでも色遊びのようなものです。意外と配色を悩みながら考えるので、よいトレーニングになります。ぜひお試しあれ！ 私が選んだペットボトルはこの3本！ ・1. オランジーナ ・2. ペプシ ・3. ポカリスエット イオンウォーター 配色の土台は当ブログを使いました。 1. オランジーナ リチャード・ギアがTORA役でCMをやっている「オランジーナ」です。 背景とヘッダーに特徴的な濃い青と黄色を使ってみました。 Color Web design 2. ペプシ アツい夏はスカッと強めの炭酸が飲みたくなります。 この中では一番配色悩みました。黒が多めなので、カッコイイ印象に。 Color Web design 3. ポカ
iOSシミュレータで日本語フォントがおかしいときの対処法 - デザインメモ
iOSシミュレータで、変なフォントで表示されてしまうことがありませんか？ 調べてところ、これは日本語よりも中国語フォントが優先されてしまう起こってしまう現象らしいです。 その対処法は… 設定で【言語を日本語に】するだけ！ iOSシミュレーターは初期のままだと、言語が「English」になっています。 「Setting」→「General」→「International」→「Language」で、 「English」を「日本語」にしてあげましょう！ 実機のiPhoneと同じように、設定から日本語を選んであげれば良かったんですねぇ〜！ 言われてみれば、単純でした！ 無事フォントがヒラギノになってくれました。 さらに、アプリ開発時でいちいち設定が面倒な時は、 以下の記事が参考になりそうです。 ・iOSシミュレータの日本語フォントが変になるのを防ぐ ・iOS – Launch Arguments
Photoshopで作業しながらスマホでデザイン確認！Macアプリ「Skala Preview」 - デザインメモ
スマホ版サイトやアプリのデザイン確認を快適にしてくれる、便利なMacのアプリ「Skala Preview」をご紹介します。 このアプリ、Photoshopで作業しながら、スマホの画面でリアルタイムにデザインが確認できるんです！しかも無料！ もし、今まで私のように（JPEGに書き出す→Google Driveに入れる→iPhoneで表示して確認…）やっている方は、「Skala Preview」をぜひ使ってみてください！ 使うために必要な環境 Mac OS X（10.8以上） iPhone（iOS 1.7以上）またはAndroid（1.2.2以上） Adobe Photoshop（CS5以上） ※上記は2014年7月30日時点の情報です。最新の情報は公式サイトで確認してください。 Skala Previewの使い方 設定は簡単で、10分ほどで終わります。 全体の流れ 手順１：まずはMacとスマ
今年の漢字は「輪」ということで、2020年東京五輪に因んで無料素材まとめ5選 - デザインメモ
今日の一番のニュースと言えば、毎年の恒例「今年の漢字」が発表されましたね。今年は五輪招致が東京に決まったことも会って、「輪」。（今年の漢字は「輪」東京五輪招致の成功などで(13/12/12) – YouTube）ということで、オリンピック関連の素材を集めてみました。※利用規約は各サイトでダウンロードの際にご確認くださいね。 五輪マークや旗 オリンピックの旗-国旗など http://freesozai.jp/itemList.php?category=nation_flag&page=ntf_003&type=sozai Olympic(オリンピック)・フリー素材NF&RS MT http://nflagrsign.xrea.jp/flag/other/olympic.php 東京オリンピックのイラスト文字: 無料イラスト かわいいフリー素材集 http://www.irasutoya.co
Photoshopで手を加えたパターンオーバーレイを背景素材として書き出す方法 - デザインメモ
Photoshopで背景にパターンオーバーレイで模様をつけました。 ですが、いざコーディングするときに書き出そうとしたら困ってしまったので、その方法を書き留めておこうと思います。 ※記事で紹介している環境はPhotoshop CC（Mac OS）です。 今回背景パターン素材として書き出したいのは、 ・レイヤースタイルのパターンオーバーレイでパターンを適応 ・比率を10%にして（図１） ・なおかつカラーオーバーレイで描画モードをスクリーンにした（図２） という、大変面倒なパターン素材です。 （図１） （図２） １、元のパターンの大きさを調べる 比率もカラーオーバーレイも反映されていない、元素材であるパターンのサイズを調べます。 まず、レイヤースタイルパネルのパターンオーバーレイを表示します。 次に、パターンのプルダウンを押して、調べたいパターンの上にマウスをしばらく置いておくと詳細【パターン
Twitter・Facebook・LINEの公式ロゴのダウンロード先と注意点 - デザインメモ
Twitter・Facebook・LINEのロゴを使う場合、それぞれにブランドガイドラインが存在します。 ブランドガイドラインとは、企業やサービスが「ロゴを使うときにこれだけは守ってね！」というルールと注意点です。 ロゴの色や改変について書いてあるものもあるので、必ず一度は目を通しておきましょう！ ショートカット＞ダウンロード先一覧 ・Twitter : https://about.twitter.com/ja/press/brand-assets ・Facebook : https://www.facebookbrand.com/ ・LINE : http://line.me/logo/ja
今、動画アプリがすごい！実際に私が夢中になってる短時間の動画アプリ4選 - デザインメモ
海外で話題の「Snapchat」というアプリをご存知ですか？ なんとこの「Snapchat」は動画が10秒で消滅してしまうんです！消えてしまうということはどんなに変な動画を撮っても消えちゃうので、気兼ねなく友達とやりとりができるという、斬新なアイデアのアプリ。 そんなSnapchatも含め、私が実際に使ってみて面白かった、短時間の動画を撮影・共有、さらに編集や加工もできるおすすめアプリをご紹介します！ Snapchat 先ほど冒頭でもご紹介した、最長10秒以内の動画や写真を送れて、一度見たら消滅するアプリ。海外では若年層を中心に流行っているらしく、おばけのキャラクターも可愛いです。 日本語訳がないので最初はちょっと操作に戸惑いますが、慣れてしまえばその面白さにハマってしまいます！ Snapchatをダウンロード → App Store or Google play Spark Camera
イラストが描けないデザイナーってどうなの？ - デザインメモ
私はデザイナーですがイラストは描けません。 「デザイナーだから、イラストぐらい簡単に描けるでしょ」ぐらいのニュアンスでよく言われることがあります。私はそのときはきっぱり描けないと言っています。 職業がデザイナーだと言えば、不思議なことに高確率でどんな絵を描くのかと聞かれます。 私はこれには最初驚きと戸惑いを感じました。 たしかにデザインを学んだ専門学校には、デザイナー志望でもイラストを描く生徒が多くいました。 大学でも、美術大学にデザインの学科があるので、デザイン＝美術出身みたいなイメージがあるのでしょうか。 でも、私は美術を専門的に学んだことがありません。私にあるのは書道だけで、私自身も美術やったことないのに、デザインの専門学校でやっていけるのかと不安に思いました。 そんな私は無事卒業して、デザイナーをやってます。 イラストが描けなくたって、デザイナーになれたわけです。 私には書道という
これはすぐ使いたくなる！Photoshop「スマートオブジェクトのリンク」機能 - デザインメモ
この機能を知ったらすぐ使いたくなった「スマートオブジェクトのリンク」をご紹介します。 先日、Photoshopの「CC 2014」が登場しました。 新機能の項目で目に留まったのが「スマートオブジェクトの強化」。そのリンク先で「スマートオブジェクトのリンク」のチュートリアル動画を観た私は驚愕したわけです(ﾟдﾟ)！ スマートオブジェクトのリンク機能とは？ 「スマートオブジェクトのリンク」は、「Photoshop CC 2014」が登場する一つ前のバージョン「Photoshop CC 14.2」から追加された機能です。 実際に行う作業としては、Photoshop上で「リンクを配置」という項目を使います。 「リンクを配置」を使うことで何が良いのかというと、 複数ファイルで共通部分があるときの“修正が簡単”になります。 いわば、共通部分をリンクすることで、一つのファイルだけ修正すればすべてに反映さ
EmberをiCloudで他のMacと共有する方法 - デザインメモ
最近、KAYAC DESIGNER’S BLOGさんの記事「１０秒以内に、ここ１年で見てきたデザインが出せますか？「Ember」活用まとめ」で紹介されていたEmberというMacアプリが気になって購入してみました。 でも、iCloudで他のMacと共有できない？！と、とても困ってしまったので、私が引っかかってしまったところも含め、iCloudでEmberを共有する方法をご紹介します。 ライブラリをiCloudに切り替えて共有 上のメニューバーから「Ember」→「ライブラリ」→「iCloud」にチェックを入れると、共有することができるiCloudのライブラリに切り替わります。 通常はここでチェックを入れて、切り替わったライブラリに画像を入れれば、他のMacでも共有できます。 iCloudが選択できないときはシステム環境設定へ ですが、私の場合、上記の画像のように、iCloudがチェックでき
「好きなことを仕事にできていいね」と言われて疑問を感じた話 - デザインメモ
私はどうせ一回限りの人生なら、好きなことをして過ごしたいと思います。（私が本当にやりたいことをやっているかと言えば、そうでもないです。ずっと探してます。笑） 旧友に仕事はデザイナーだというと、「好きなことを仕事にできていいね」と言われました。 私にそう言った彼女は大学を出て、販売員をしています。でも彼女のSNSは仕事の愚痴ばかり。まだ、将来やりたいことを語っていた学生だった頃の彼女の方が輝いていたように思います。 でも、今の彼女は学生の時に語っていた方向に進んでおらず、仕事もなんだかいまいちのようで、久々に会った彼女の表情はどこかくすんでさえ見えました。 いろいろ事情があったのか、私は細かいことまで聞きませんでしたが、久々に会った旧友は今の現状を正当化するために何かを“言い訳”を探して話している感じでした。 好きなことを仕事にできていいね。 羨ましい。運がいいんだね。 私は運が悪い。 毎日
Illustratorでアートボードの順番を変える方法 - デザインメモ
Illustratorで資料を作っていたところ、PDFに別名保存したら順番がおかしくなってしました。どうやらアートボードをあとから複製していたので、順番をごちゃごちゃにしてしまったようです。 そこで、アートボードの順番の変え方を調べたので、自分のメモ代わりにも書き留めておきます。以下からどうぞ！ まずは、アートボードパネルを表示します。 パネルが出ていない場合は、 メニューバーの「ウィンドウ」→「アートボード」で表示できます。 ↑レイヤーパネルのお隣にいますよー。 そこで、順番を変えたいアートボードを （方法1）ドラックして移動させるか、 （方法2）パネル下の矢印ボタンを押すと移動できます。 これで、PDFで保存したときもちゃんと順番どおりに並んでくれます！ ※注意：アートボードパネルはCS5以降に実装されたものです。 鈴木：上に注意書きしましたが、このアートボードパネルはCS5から実装さ
書体とフォントの違い - デザインメモ
普段、『フォント』と言ったり『書体』と言ったり、私自身の中でも混在していているのでまとめてみました。 ですが、調べてみても『書体』と『フォント』はそれぞれ歴史があるのですが、現在ではデジタル化の流れで曖昧のようです。 書体とフォントの違いは曖昧？ “書体”は「共通した表情をもつ文字の集まり」 『書体』とは共通のコンセプトによってつくられたものを指します。例えば、『新ゴ』や『MS明朝』。それを大きく分類したのが『明朝体』や『ゴシック体』です。 日本の『書体』という言葉は中国から来ています。昔、中国から伝わった『篆書』『隷書』『楷書』『行書』『草書』の五体。そして、それに加え印刷用の書体『明朝体』や『ゴシック体』などがあります。 また、書体は英語のタイプフェイスの訳語として使われています。 和文書体は明朝体・ゴシック体・楷書体など、欧文書体にはローマン・イタリック・サンセリフが基本的な形です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2014年前半まとめ：日本の“和”を活かしたWebサイトデザイン15選 - デザインメモ
Webデザイン関連の話題まとめ！Weekly News vol.12（9/29〜10/5） – デザインメモ
前回のPhotoshopショートカットのPDFをつくってみました - デザインメモ