今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ（仏: Sans-Serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体（セリフ体・ローマン体とも呼ぶ）と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す

商用利用OK！無料で使えるフリー画像・写真素材サイト6つ【2017年版】 すぐ使える！商用利用可、著作権CC0、無料で使えるフリー画像・写真素材のサイトをまとめてみました。実際に使用した感想も記載しています。風景から人物、小物類まで綺麗でクオリティの高い画像が揃っています。 ブログやメディアサイトを運営していると出てくるのが、画像問題。 検索で出てくる画像を勝手に使うのは著作権違反…誰かのブログやSNSの画像を使うなら、発信者に連絡を取らなきゃ…という手間暇を掛けたくない人は、フリー画像を探さなければなりません。 そんな人に役立つ、国内・海外含めて「本当に使いやすいフリー画像サイトだけ」をまとめてみました。 実際に使用してみてメリットデメリットも記載します。 ブログやメディアの雰囲気に合わせて、複数使い分けてくださいね。

今回は無料かつ商用フリーのイラスト素材サイトを30紹介します。これらのサイトをチェックすれば、人物、動物、植物、建物、電子機器などなど、あらゆるジャンルのイラストが見つかるはずです。気になるものがあれば、保存またはブックマークしておくことをおすすめします。 まずはここをチェック！優秀なイラスト素材サイト はじめに、使い勝手の良いおすすめのサイトを紹介します。 ちなみに、CanvaというWeb上で使えるデザインツールでは、商用利用OKのかわいいイラストがたくさんあります。下の記事にまとめてあるので、そちらもご覧ください。

配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ コンテンツ目次 1. インスピレーションの見つけ方 2. 色彩配色の決め方 3. カラー・アクセシビリティ 01. インスピレーションの見つけ方 自然から デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど

みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出

今回はデザインに関するiPhoneアプリを15コ厳選して紹介します。「デザイン制作用」「イラスト用」「情報収集用」などと用途別にまとめていきます。ぜひ参考にしてくださいませ。 解説 どんなアプリ？ Canva（キャンバ）は2017年5月に日本に上陸したオーストラリア生まれのデザインアプリです。フライヤー、ポスター、名刺、Instagram用画像などなど、あらゆるものをおしゃれにデザインすることができます。 特徴は？ 直感的に、センスが無くても、おしゃれなデザインを作れるのがCanvaの特徴です。また、たくさんのハイクオリティなテンプレート用意されています。テンプレートをベースにして、文字や画像など必要な部分を変えていくだけで良いわけですね。

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

ロゴデザインは、会社やウェブサイト、ブランドなどにおいて顔とも言える重要なデザイン要素です。この記事では、毎年目まぐるしく変化するロゴデザインの最新トレンドを分析した「2017 Logo Trends」を各ポイントごとに詳しく見ていきましょう。 2017年のロゴデザインはこれ！確認しておきたい要注目のトレンド7個まとめ 2017年決定版！人気ロゴデザインのトレンド15個まとめ Shadow Breaks シャドウ・ブレイク これまでは潜在的な現実感のあるグラフィック表現は、デザイナーにあまり受け入れられませんでした。このシャドーブレイク（英: Shadow Break）は、ある要素が別の要素と交わるときに、立体的な影を組み合わせるテクニック。 フラットカラー以外のデザイン方法を必要としますが、特に難しいことではなく問題はないでしょう。奥行き感を表現できるこの新鮮な方法によって、立体感をうま

ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。 今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ

最近のWebデザインは写真とタイポグラフィ、そしてシンプルな区切り（グリッド）などで表現されることも多く、その中で少しでも面白い見せ方を考えると、曲線や角度など、ちょっとしたアクセントが欲しくなったりします。 ということで、今回はこちら。 ワンカラムに多いコンテンツ区切りを角丸で描く つまりこれですね。 これまでは「マスク画像」として、png画像を乗っけたりして一部を隠すように表現していたことが多いかと思いますが、よくよく考えたら別にCSSでできるもんねぇ。 今までこの手のコーディングをする機会がなく、使いそうで使ってなかったので、メモとして残します。 まずはhtml <div class="wrap"> <div class="arc"> <p> なんか本文 </p> </div> </div> class=”arc”部分の下部で円弧を表現します。 説明が面倒なのでCSSはこちら .wr

企業にとって、採用サイトあるいは採用ページというのは、既に存在して当たり前のものになっています。Webサイトは本業のビジネスではなくむしろ採用に活用したい、というような声も多く聴きます。実際に私たちが受注する案件でも、採用サイトは少なくない割合を占めています。しかしこのように企業からの関心が非常に高い採用サイトでありながら、マーケティングの一部として作られるWebサイトと比べると、戦略性や考え方の点で大きく遅れをとっているようにも感じます。このエントリーでは、世の採用サイトに関して私が感じている問題点を少しまとめてみました。 採用サイトからの直接エントリーが増える条件採用サイトを立ち上げる多くの企業は、自然検索からの採用サイトへの流入が増え、採用メディアや採用エージェントを挟まない直接エントリーが増えることへの期待を口にします。しかしその考えはいささか早計ではないでしょうか。 採用サイトの

2017年、特に人気の配色カラーパレットのひとつが、淡い色合いが特長のパステルカラーです。今回は、これから暑くなる夏の季節にぴったりな配色カラーパレット15個をまとめてご紹介します。 パステルカラーを中心とした控えめで落ち着いた美しい配色は、ユニーコンの色合いや夏の夕日、美味しそうなマカロン、アイスキャンディーなど夏を連想させるアイテムが揃います。 配色をそのままコピー&ペーストできるHEX値も一緒にまとめています、ウェブサイトやグラフィックデザインの制作で配色に迷ったときに活用してみてはいかがでしょう。 配色完全ガイド！カテゴリー別見本100個とカラーパレットの使い方まとめ Webデザイナー向け配色ガイド！すぐに役立つカラーパレット50個まとめ 夏デザインの参考にしたい、パステル系の美しい配色カラーパレット15選まとめ

女性向けの商品、サービスを取り扱う企業や子供向け商品を取り扱う企業などでは、可愛らしい商品や店舗の内部を公開する為にはホームページが必要です。見やすく、綺麗な子供向けの綺麗なサイトを作りたいと考えている人は多いのではにでしょうか。そこで日本全国の可愛いいホームページを厳選して集めてみました。ひとつでもお気に入りがあるのではないでしょうか。

今回は、2017年を三分の一過ぎたところで、確認しておきたいグラフィックデザインの最新トレンドをご紹介します。パッケージデザインからタイポグラフィー、レイアウトやシネマグラフなど幅広いトレンドを網羅しています。 2017年は、わたしたちがオーガニックで自然を起源としたものに戻る年であり、よりナチュラル思考が高まっていくでしょう。配色に関しては、毎年 Pantone 社が発表している今年の色として、「Greenery」が選ばれ、新しい始まりや新鮮や環境を意味しています。 「春のはじめを連想させるような、新鮮で独特な黄緑色の色合い」として表現されている  には、自然のありがたさを再認識、楽しもうという概念も含まれています。 では、2017年現在のグラフィックデザインのトレンドをより詳しく見ていきましょう。多くのトレンドは、ウェブデザインとプリント媒体のどちらにも影響しています。 これでもう悩ま

テクスチャやパターン素材は、さまざまなデザインに対応できるお役立ちアイテムのひとつで、常に新しい素材を手元にコレクションしておきたいもの。 今回は、デザインの幅がグンと広がる、無料ダウンロードできるテクスチャ＆パターン素材をまとめてご紹介します。人気の高い水彩ペイントや黄金テクスチャ、大理石など旬なアイテムから、ずっと使える万能テクスチャなどさまざまな素材が揃います。またプレミアムアイテムにも負けないほどの高品質なクオリティーもポイントです。 デザインの現場で使える、持っておきたい無料テクスチャ素材40枚まとめ Photoshopに役立つ、無料の万能パターンテクスチャ厳選40枚 2017年4月度 無料ダウンロード！デザイナー注目の極上テクスチャとパターン素材まとめ 10 Watercolor Textures vol.4 水をたっぷり含んだ水彩ペイントの色の混ざり方を、見事に表現したテクス

今回は、ウェブサイトやブログなどに設置するパンくずリストについて解説します。「パンくずリストとは何？」というところから具体的な設置方法や、CSSのデザインサンプルまでまとめていきたいと思います。 パンくずリストとは パンくずリストとは、ユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。英語では「breadcrumbs」と言われます。

異なるサイズのディスプレイでコンテンツをセンタリングし正しく動作させるのは、デザイナーにとって未だに大きなチャレンジです。 実装の手段も様々に存在し、どれが最も優れているのかがわかりにくくなっています。多くのCSSによる縦方向センタリングは多くのコーディングが必要になったり、メディアクエリを使う必要に迫られたりします。それぞれの手法がどのように目的を達成し、HTMLやブラウザのルールにどのように影響されるのかを知ることで、より優れた実装を選べるようになるでしょう。 では、実際に作ってみましょう。まずは基本となる要素を作ります。 ブログなどではよく使われる実装です。itemクラスを与えたコンテンツラッパーがあり、p要素の内部にテキストが入ります。この段落、またはitemラッパーのコンテンツこそが今回センタリングする要素になります。 ここからはセンタリングを実現する手法を6つ紹介していきます。

こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能

文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffects の場合は、当然ながら動画として出力しvideo要素で動画を埋め込んで表示させるわけだけど、SVGの場合は、（主に）インラインSVGを設置してJavaScriptでアニメーションさせて実現する。 少し前までは、一部のブラウザでうまく表示できなかった（気がした）が、今は全く問題なく表示させることができるようになっていた。古いIE（10以前）ではさすがに無理だけど、もう考慮する必要はないと思われるので、十分に使える表現だと思う。 SVGの作成が意外に面倒だったので作成時のポイントとか、HTMLへ設置する方法、JS実装ではまった点等を覚書として書いておく。 ハンドライティン