新人デザイナーがUI制作時に陥りやすい4つの問題と解決策 | Nagisaのすゝめ
はじめに こんにちは！新卒デザイナーの浜田です。 今回は、入社して初めての担当サービス「UPTOON」の作品管理画面のデザイン時に起こった問題を、ケース別に紹介・解決策の提案をしていきたいと思います。 本記事は、以下の構成となります。 開発前のデザインの状態 起こった問題とその解決策〜開発編〜 起こった問題とその解決策〜デバッグ編〜 まとめ 同じく新人のデザイナーさん、デザイナーを目指している方には特に本記事を読んで注意してもらいたいです！ 開発前のデザインの状態 エンジニアさんにデザインを渡す前に以下の項目はクリアしており、自分では大丈夫だろうなと思っていました。 ボタンやテキストのHoverやActive状態のデザイン用意した セルのテキストが1行の時、2行の時など複数パターン用意した 入力前、入力後など状態別に用意した エラーページ、エラーメッセージ用意した 必要な素材は書き出した
手書きのフリースクリプトフォント「25 Beautiful Script Fonts to Use in 2017」
TOP > Font > 手書きのフリースクリプトフォント「25 Beautiful Script Fonts to Use in 2017」 デザインには欠かせないフォント。ゴシックや明朝といったベーシックなものから、手書きまで、数え切れないほど多くのフォントが存在しています。そんな中今回紹介するのは、近年人気を集めている手書きのフリースクリプトフォント「25 Beautiful Script Fonts to Use in 2017」です。 ANISHA – FREE SCRIPT FONT on Behance さらさらっと書かれた細身のフォントから、しっかりとした力強いものまで、いろんな種類が紹介されています。気になったものをいくつかピックアップしてみました。 詳しくは以下 Humblle Rought Free Demo – Dirtyline Studio 平たいペンで
WEBコーダーがデザインをしてみてわかったWEBデザインの注意点 - 第1回 | toMemo - メモ的に色々書いていく個人ブログ
最近WEBデザインをします。 デザイン自体は久しぶりです。 昔はコーディングもよくわかっていませんでしたし、デザインもより堅い感じでした。 なのでデザインされていれば問題無いという感じでしたが、最近はそうもいかないことがあると思いました。 そんなそうもいかないことを注意してくれる、伝えてくれるだけでコーディングする側も楽になると思い、まとめてみました。 （個人的な部分も多々あります。） 対応方法をはっきりさせる CSSとブラウザも変わり、画像でやっていたことがCSSだけでできるようになりました。 例えば不透明度だったりWEBフォントだったり。 画像は写真やイラストだけでそれ以外はCSSというサイトも多いと思います。 ただし、実際コーディングをするときはっきりしていることは多いでしょうか？ WEBフォントの場合 Google fontsやTypekitなど無料で使えるWEBフォントが増えてき
ブログのタイトルロゴに使える！フロップデザインのおすすめ日本語フォント8選 - Minimal Green
フロップデザインさんは老舗のフォントショップですね。とっくに皆さんご存知だと思いますが、フォントの数が膨大なのでお気に入りの日本語フォントを選んでサンプルロゴを作ってみました。主にガーリーデザイン向けの日本語フォントです。はてなブログのタイトルロゴ画像の参考になるよう1000*200pxで作りました（一部例外あり）。 フォントを変えるだけで見た目の印象って全然変わります。デザインはヘボいですが、フォントは超優秀なので、ぜひダウンロードして使って見てください。 フロップデザインさんのフォントは個人で利用する分には無料で使えます。ユーザー登録（ショップ会員とは別）すればダウンロードできます。（一月にダウンロードできる数は制限あり）商業利用は多くのフォントで製品版のみ可となっているので、アフィリエイトサイトなどで利用するには製品版を買いましょう。 日本語フリーフォント収録 フロップデザインフォン
フリーフォント22選【日本語対応／商用可／無料】
最初から入っている標準フォントだけでは、ブログの画像にキャプションを入れたいとき、WEBサイトのメリハリを付けたいとき、ロゴを作りたいときなど、かっこがつかない！そんなふうに思うことありますよね。 しかしフリーフォントって、あまりに種類がたくさんありすぎて、どれを使っていいのやら困ってしまいがち。欧文フォントは種類も豊富だけれど、日本語対応(漢字も対応)フォントを探し出すのはひと苦労。 そこで！今回は使うだけでサイトや印刷物がかっこよく仕上がる、そんな日本語フリーフォントをご紹介いたします。 誰でも自由に無料ダウンロード！商用利用も可日本語対応上記を満たすフォントの中でも、特にクオリティが高く、様々なシーンで使用できそうなフォントを中心に集めました。（参考：サイト改善 10のポイント） 誰でも上手いキャッチコピーが作れる！ノウハウ記事17選とテクニック集 1. スタイリッシュにまとめたい
商用利用OK！2016年にリリースされた無料フォント30 | Webクリエイターボックス
2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
あのエヴァフォントが公式発売！ 庵野秀明がマティスEBを選んだ理由
庵野秀明さん監督による人気作品「新世紀エヴァンゲリオン」でおなじみのフォント「エヴァ明朝」こと「マティスEB」が、パッケージ製品となって11月10日（木）に発売される。 収録されるフォントは、TVアニメシリーズで使用された「EVA-マティス-クラシック」と、新劇場版で使用された「EVA-マティス-スタンダード」の2種類。 さらに、エヴァとマティスが歩んだ20年の歴史を振り返った特典ブックレットも同梱。庵野監督がマティスを採用した理由や、エヴァのタイポグラフィ表現がアニメ業界にもたらした功績などの貴重な情報が収録される。 年賀状やプレゼンに使える！ 「新世紀エヴァンゲリオン」といえば、最近では『シン・ゴジラ』の総監督としても知られる庵野秀明さんによるアニメーション作品。 作品が爆発的な人気を誇る中、予告編で毎回流れるインパクトの強い独特のフォントは、エヴァ風の映像や画像をつくる上で重宝されて
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方
読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C
息抜きに眺めたい、ペン一本で描くカリグラフィーの世界 | UX MILK
SNSなどでたまにファンシーな文字をスラスラと書いている動画を見かけませんでしょうか？ 現代ではデジタルのフォントで済ませてしまう場合も多い文字組みのデザインですが、手描きでおしゃれな文字をスラスラと描く様は思わず最後まで見てしまいます。 今回はそんな思わず見とれてしまう、カリグラフィー動画をご紹介します。デジタルのご時世の今だからこそ貴重な表現手法をお楽しみ下さい。 カリグラフィーとは カリグラフィーとは、西洋や中東において、ペンを用いて文字を美しく見せる手法のことを指します。日本の書道に近いものがありますが、カリグラフィーは毛筆ではなくペンやそれに類する特殊な形状の道具を使います。 国内では主にアルファベットの装飾文字のことを言っている場合が多いですが、イスラム圏やその他のアルファベットではない言語でも用いられています。 カリグラフィー動画集 以下はヘラのような筆先のカリグラフィーペン
これから使い始めたいWebフォント＆Google Font活用法まとめ
日本語Webフォントも充実してきて、本腰を入れてWeフォントを使ったサイトデザインをすすめている人も多いことでしょう。Webフォントの選び方や組み合わせ方、滑らかに見せる方法、実装の舞台裏など、Webフォント関連記事をご紹介します。 1.Webフォント選びを楽しくするツール 『文字好きにはたまらない！Webフォント選びが楽しく捗るツールたち』（WPJ） Webフォントのおかげで文字の表現力が格段にアップした今日この頃。選択肢が増えたのはいいけど、選ぶのが大変すぎる…。そこで、フォント選択と導入が捗るツールがまとめられています。 2.Webフォントサイトを30紹介 『【保存版】和文のWebフォントサイト30選』（ferret） Webフォントを使用すると、表現できるデザインの幅が格段に広がります。日本語に対応しているWebフォントは少ないとはいえ、いろいろと工夫をこらしたフォントがダウンロー
結婚式にオススメ！無料で使えるエレガントなフォント組み合わせ25選
招待状や座席札、婚約のお知らせメールなど、結婚式ではフォントを利用する機会がたくさんあります。しかし結婚式における、すべての細かい詳細まですべて決めるとなると大変な作業になるでしょう。今回は、エレガントで美しい雰囲気を演出する、結婚式にぴったりなフリーフォントの組み合わせ25選をまとめてご紹介します。 無料のフリーフォントの中からお気に入りの書体を探す必要もなく、作業時間の短縮にもつながります。洗練された筆記体や、スッキリとしたモダンな見た目、手書きスタイルなど結婚式に最適なマッチングが魅力です。また、サムネイルをクリックすることで無料オンライン・デザインツール Canva で編集、カスタマイズすることもできます。
「文字詰め」の使い方
この ‘palt’ は「プロポーショナルの文字幅（プロポーショナルメトリクス）」を適用するためのキーワード（フィーチャータグ）です。 フィーチャータグを指定することで、かなや約物など全角幅でデザインされた文字が、固有の適切な字幅で前後の文字と詰まって表示されるようになります。 ‘palt’ 以外に利用可能なフィーチャータグとして ‘halt’ があり、こちらは主に約物類を半角幅に調整します（字幅半角メトリクス）。 プロポーショナルメトリクスの例（上：設定なし、下：’palt’を適用） 字幅半角メトリクスの例（上：設定なし、下：’halt’を適用） 文字詰めに関する情報は、当社フォント製品「MORISAWA PASSPORT」などに収録されているフォントと同一ですので、手元の制作環境にあるデスクトップフォントを利用して、文字間の詰まり具合を確認することもできます（これらの詰め情報は、Open
エンジニアも今すぐ始めたい「タイポグラフィ」と「ロゴデザイン」｜Technical Creator Hub
前川 裕一 Github: kaelaela Twitter: kaelaela31 2014年度入社。755のAndroidエンジニア。 前回 、 前々回 に引き続き、エンジニアがデザインについて学び、身につけていくテクニカルクリエイター研修についてのレポートです。 今回は 「 タイポグラフィ 」 と 「 ロゴデザイン 」 を実際に手を動かしてやってみました。 本業としている人からみたら基礎中の基礎かもしれないですがとても勉強になる研修でした。 少しくらいエンジニアでも聞いたことがあると思いますが、今すぐ始められてなおかつ奥深いのがよかったです。 タイポグラフィというと幅広いですが、今回の課題は 自分の名前をローマ字でタイプする と 自分の肩書きと所属を日本語でタイプする でした。自分が課題に対して考えたのは以下のようなことでした。 - 書体・字体 - 文字の大きさ
かっこいい日本語フリーフォント16選（デザイン向き） - 無料で使える日本語フォント投稿サイト｜フォントフリー
日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン
2016年にデザイナーが挑戦したい、10個の美しいフォントトレンドまとめ
2016年もすでに半分を過ぎたことで、フォントにおける今年のデザイントレンドが見えてきました。今回は、2016年に挑戦したいフォントのトレンド10個をまとめてご紹介します。 詳細は以下から。 01. 水彩ペイント・フォント まず真っ先にご紹介したいのが、2016年を代表する美しい水彩ペイントによる書体デザインです。Instagram など SNS への投稿から、Tシャツデザイン、結婚式の招待状などさまざまなところで活用されています。リラックスした（英: Laidback）、とても心地よい（英: Luscious）なスタイルが特長で、ほんの少しの色、または白黒で表現されています。 02. 大きな太字フォント かつではすべての書体、タイポグラフィーは小さく表示されていましたが、そんな時代はもう終わりです。最近では、フルスクリーンで表示されたイメージ写真と一緒に、力強い太字の書体を利用するのが一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
有料フォントの代替になるフリーフォントも見つかる！ブックマークしておきたいフォント関連の便利なサービスのまとめ
デザイナーが持っていたい、特にこれはダウンロードしておきたいフリーフォントのまとめ | コリス
CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
