mami-hateのブックマーク - はてなブックマーク

【商用可＆無料】2019年上半期ベスト英語・日本語フリーフォント厳選90個まとめ

当サイトでは、毎月新しく公開されたフリーフォント素材をまとめてご紹介しています。この記事では、2019年上半期にリリースされた、商用利用でも使える完全無料の英語・日本語フリーフォントをまとめてご紹介します。オシャレな英語フリーフォントから、需要の多い日本語フォント、2019年注目を浴びている高級感のあるセリフ書体、安定人気の筆記体、筆ブラシの手書きナチュラル系、モダン・レトロ、ビンテージ、デコレーションなど幅広いカテゴリよりフリーフォント素材90個を厳選しています。 2018年の商用可能なフリーフォントに関しては、以下の記事を参考にどうぞ。商用可で完全無料！2018年公開のフリーフォント素材132個総まとめコンテンツ目次 1. 日本語フォント 2. 万能フォント 3. 筆記体フォント 4. サンセリフ書体 5. セリフ書体 6. 手書きナチュラル系フォント 7. 筆ブラシ・フォント

mami-hate 2019/07/23

リンク

ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツールウェブデザイン制作を爆速に！便利な最新オンラインツールまとめモックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作

mami-hate 2019/03/12

リンク

HTMLスニペット数1100以上！ウェブ制作の必要パーツをカテゴリごとにまとめた Free Frontend

ウェブサイトの制作でアイデアが欲しいとき、他のデザイナーやプログラマーが作成した作品からインスピレーションが湧いてくることがあります。ウェブデザインに必要なパーツをカテゴリー分けし、1100種類を超えるHTML/CSS/JSスニペットをコレクションしている Free Frontend を、今回はご紹介します。ますます重要になっているページ遷移やホバーなどのアニメーションエフェクトを筆頭に、ボタンやカード型レイアウトなどウェブサイトに必要な部品ごとに、コピー&ペーストできるHTMLスニペットをまとめられているので、制作で困ったときのアイデア出しにどうぞ。 HTMLスニペット数1100以上！ウェブ制作に必要なパーツをカテゴリごとにまとめた Free Frontend Free Frontend では、ウェブサイト制作に必要なパーツを、細かくカテゴリ分けし、コピペできるHTML/CSSスニペ

mami-hate 2019/01/31

HTML
css

リンク

2019年の人気フォントはこれ！押さえておきたい最新フォントトレンド9個まとめ - PhotoshopVIP

美しいタイポグラフィをデザインに取り入れることは、ブレンド力を高めるもっとも効果的な方法のひとつです。そのためには、最新のフォントトレンドを理解しておくことが必要になります。クリエイティブなフォントは、メッセージを伝えるだけでなく、インパクトのあるビジュアルで感情を呼び起こします。タイポグラフィーは、喜びや恐怖、喧騒と静寂のどちらも表現でき、驚かせたり、怖がらせたり、あらゆる感情を演出できます。この記事では、2019年にかけて注目したい、フォントデザインの人気トレンド9個を予想し、まとめてご紹介しています。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。コンテンツ目次 1. 大胆すぎる太字フォント 2. ミニマルなサンセリフ書体 3. ノスタルジックなビンテージフォント 4. 進化系の筆記体フォント 5. アウトライン・フォント 6

mami-hate 2018/12/10

フォント

リンク

CSSの作業をもっと楽に！無料で使える便利なWebツール40選

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ

mami-hate 2018/08/29

css

リンク

話題のデザインシステムって何？積極的に取り入れたいデザイン要素14個まとめ

ここ数年、デザインシステム（英: Design System）がデザイナーの間で話題となっています。この記事では、デザインシステムが重要な理由と、何を含む必要があるのか、人気ブランドから公開されているデザインシステムのサンプル例と一緒に、まとめてご紹介します。多くの企業やビジネスにおいて、デザイン設計により投資するようになってきています。デザインシステムをきちんと作成することは、成長を続けていて、すべてを把握する必要がある企業やチームにとってとても有益で、良いユーザー体験には不可欠と言えます。デザインシステムは、デザインのミスを削減したり、デザインプロセスを高速化、またさまざまなチーム間でのやりとりにも役立ちます。 01. グリッドグリッド（英: Grid）は、ページレイアウトを理解し、統一するために必須のコンポーネントです。たとえば、MailChimpのデザインシステムの最初に記述さ

mami-hate 2018/07/19

リンク

2018年のロゴデザインはこれ！確認しておきたい要注目のトレンド15個まとめ - PhotoshopVIP

毎年、ロゴデザインの動向、トレンドをまとめている LogoLounge で、2018年のロゴデザイントレンド15個が発表されていたので、今回はご紹介します。このレポートは、過去16年間に27万2千個に及ぶロゴを分析し、新しいデザイントレンドを取り入れるきっかけ、手がかりとしてまとめられています。 2018年のロゴデザイントレンド要約クリーンでモダンな見た目から曲線を活かしたレトロデザインへ変化しています。表情の豊かなセリフ書体が流行し始めています。ノスタルジックなデザインは、モダンなコンテンポラリーデザインに引き継がれています。デジタルスクリーン画面によって、鮮やかで激しい色使いが見られます。グラデーションカラーは、ひとつの色として認識されるようになっています。このレポートを発表した Bill Gardner 氏は、以下のように述べています。このレポートから得られる重要な点

mami-hate 2018/06/06

参考に

ロゴ
logo

リンク

ウェブデザインなどに使える無料ベクター素材76個まとめ

デザインをするときにベクター素材を利用する方いらっしゃいますか。ベクター素材のメリットは、拡大縮小も自由自在ですし、Illustratorで作成した後、Photoshopに移行してデザインを続けることも可能な点ではないでしょうか。海外デザインブログ1st Web Designerで、ウェブデザインに利用できる無料ベクター素材を76個まとめたエントリー「Discover Amazing Vectors Wolds: 76 Amazing Vector Resources」が公開されていましたので、今回はご紹介します。ウェブデザインに限らずアイデア次第では印刷用デザインやポスターなどにも応用することができそうです。すべて無料でダウンロードすることが可能となっていますが、使用に関するライセンスは異なりますのでご確認のうえ利用するようお願いします。また以前にも「デザインに使える無料ベクタ

mami-hate 2017/05/19

リンク

レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度

ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。サイト設計の手間を

mami-hate 2017/01/18

ポートフォリオサイト制作の参考に

リンク

機能的で美しいデザインを目指そう！スタイルガイドに必要な6つの重要ポイント

Dropbox や Google、Twitterを見てみると、どの会社も独自のユニークなデザインセンスを持っていることが分かります。モバイルからウェブサイトまで、すべての商品やサービスの設計において、均一にデザインが統一されています。スタイルガイドを活用することで、一貫性のあるデザインに仕上げることができるでしょう。信頼性につながることから、統一性が重要になってきます。また、商品やサービスとユーザーのつながりを作ることが、デザインとも言えます。この記事では、じっくり検討されたスタイルガイドとブランディング用ガイドラインについて学びます。また、スタイルガイドに記載しておくべき6つの重要なポイントについても詳しく見ていきましょう。今回紹介するサンプルや要素を参考に、今後のデザインプロジェクトに活かしてみてはいかがでしょう。まずははじめる前に。スタイルガイドを作成するときに気をつけたい

mami-hate 2016/07/27

これを参考に余白の使い方のページを追加する

リンク

背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。詳細は以下から。背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe