WEBデザインで誰もが使う定番フォント18選！基礎知識も解説します | 生き方・働き方・日本デザイン
書体とフォントについてWEBデザインで文字を扱うのに、「書体」や「フォント」という言葉を耳にすることは、かなり多くあると思います。 このふたつの言葉は同じようなものと思われがちですが、実は厳密には違うものなのです。 「書体」とは特定されるデザインで統一されている文字のことで、明朝体やゴシック体などのことをいいます。 「フォント」とは、書体の太さや形などを表示するデータのことで、レギュラー、ボールド、イタリックなど特徴で区別されています。 本来の意味は違うものですが、今では同じように扱われていることもあり、WEBデザインでは、同じ意味で使われることが、もはや一般的になっています。 ここでは同一のものとして考えていきますね。 和文書体和文書体は日本語を表す書体で、漢字、ひらがな、カタカナが混在します。 文字は「ボディ」と呼ばれる正四角形の範囲内に設計されていて、漢字と比べてカタカナは少し小さく
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新｜ryota_funakoshi
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
あの時ぼくらは若かった。新人デザイナー時代あるある＆その対処方法｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、すなぎもです。 もう8月。夏真っ盛りですね。こんなときはビールと砂肝にかぎります。 さて今回は、新人デザイナー時代に自分が出会った「デザイナーあるある＆その対処法」を、第1章：Illustrator・Photoshop、第2章：html・css編、第3章：スケジュール管理・考え方編の3つに分けて、4コマと解説でまとめてみました。今年4月からデザイナーになった新人の皆様は、そろそろ案件を任される頃かと思います。そんな時に出会いそうな「あるある」を集めてみましたので、少しでも参考になると幸いです。 また、ベテランデザイナーの皆様も、昔を懐かしんでもらいつつご自身の新人時代を思い出し、広い心で新人さんに接していただければ…と思います。 それでは、さっそくいってみましょう！ 第1章：Illustrator・Photoshop編 怪奇！荒くなっていく画像たち 「え！こんなレベルから！？」
ここが最前線！2015年WEBデザイントレンド13選
更新日: 2017年5月22日公開日: 2015年6月4日ここが最前線！2015年WEBデザイントレンド13選 時代ごとに web デザインは変化し、いつの時代もユーザーの視線と心を釘づけにできるよう創意工夫されています。 また例え難しいデザインのテクニックが無くても、その時々のトレンドをうまく取り入れるだけで、斬新なサイトにも見えます。今流行りの web デザインを 事例を含めてご紹介します。 はじめに - 2015年 web デザイントレンドの背景ファーストビューよりスクロールを重視するデザインに Photo: cewdseo.com 今やフェイスブックやツイッター、LINE などの SNS は、私たちの生活に無くてはならない存在となりつつあります。日本人の5人に1人が Facebook ユーザーで、世界でもおおよそ5人に1人が Facebook を使っています。 またスマホ普及率は国
UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま
Ferret週間まとめニュース9記事【2/16～2/20】｜Ferret [フェレット]
今週（2/16～2/20）Ferretが配信した記事の中で、特に反響の大きかったものをまとめました！すぐに役立つノウハウやまとめ系が揃っているので、週末、時間が空いた時にゆっくり読んでみてはいかがでしょうか？
![Ferret週間まとめニュース9記事【2/16～2/20】｜Ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/332b503446d70f799285d531b14689dbfdca9bd8/height=288;version=1;width=512/https%3A%2F%2Fferret-a.akamaihd.net%2Fimages%2F54e6ecf469702d698d2b0000%2Flarge.jpeg%3F1424420082)
宣伝や販促を加速する、感情を揺さぶったプロモーションWebサイト事例から学ぶこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 突然ですが、最近、サイトを制作するにあたって「どうやってユーザの感情を揺さぶるか」ということを頻繁に考えています。 コーポレートサイトにしてもプロモーションサイトにしても、「その企業の事業内容」や「製品」だけをシンプルに取り出してしまうと、同じような会社や製品が複数存在するものです。 もちろん細かく掘り下げていけば差別化できる部分は必ずあります。 しかし、制作の際にヒアリングをしたり調査をしたりと時間をかけて発見した差別化のポイントが、ただ並べたり比較するだけで、本当にユーザに届くのだろうか……。 どうすればユーザに届くのか？ ぐるぐると考える中で行きついたのは、ありきたりですが「感情を揺さぶる」ことでした。 「ああそれ分かる」と共感させること 「想像」や「当たり前」を良い意味で裏切ること それを見た（体験した）人が楽しいと感じたり、切なく思ったりする
エディトリアルデザインから盗め！女性誌に使われているデザインを見てみた｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ
まさに今、読むべき一冊「現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3」 / Maka-Veli .com
友人が本を共著で書いたというので購入。 予想以上に面白かったのでご紹介です。買って良かった！ 内容はというと、 例えばこのように最近のトレンドについて具体的なことが書かれていたり 役立つツール集のページがあったり 参考になるサイトや書籍のまとめがあったり プロトタイピングツールの紹介がまとめられていたり 具体的に導入方法も紹介されていたり 総ページ数160ページでびっしり盛りだくさん書かれているので読んだ後に色んな知識が得られるのはもちろんなのですが、Amazonレビューにもあるように著名な方々が書かれてる事もあって、デザインに対するさまざまな視点だったり考え方だったりを汲み取って読んでいくのが非常に楽しめる一冊でした。 友人から一言。 @maka_velicom この度は、ご紹介いただきありがとうございます。感想としては、今回は突然執筆のお話をいただきバタバタで終わり
レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
ウェブサイトで珍しい形を取り入れたサイト14こ紹介
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。 ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。 やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ！ 三角形を使ったデザイン 三角形を使う場合、余白をどう活かすかが重要になってくると思います。 Snowbird Snowbird コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP