デザイナー必見！商用利用可の最新フリーフォントまとめ「23 Fresh Free Fonts for Graphic Designers」
TOP > Font > デザイナー必見！商用利用可の最新フリーフォントまとめ「23 Fresh Free Fonts for Graphic Designers」 高品質なフリーフォントはデザインに欠かせない存在です。いざという時に備えて、幾つかフリーフォントをストックしておけば、デザインの幅も広がりますし時短にも繋がります。今回はそんなデザインに役立つ、最新のフリーフォントをまとめた「23 Fresh Free Fonts for Graphic Designers」をご紹介します。 SALMELA – FREE CALLIGRAPHY FONT on Behance 23種類もの商用利用可のデザイン性の高いフリーフォントが紹介されています。その中から、幾つかおすすめのフォントをピックアップしましたのでご覧ください。 詳しくは以下 Alexana Free Font on Be
【プロが愛用する！】どのシーンでも役立つ7つのデザインツール
【プロが愛用する！】どのシーンでも役立つ7つのデザインツール モバイルアプリやスマホ向けのデザインを行う作業が増えてきたことに比例して、モバイル向けのデザインツールも増えています。ここで紹介しているのは、UI/UXデザインの作業に役立つツールです。プロも愛用しているソフトも多いので、ぜひ試してみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Erminesoft社のブログ記事を了解を得て日本語翻訳し掲載した記事になりま
すべての人に知っておいてほしい、4つのデザイン基本原則とは？
「より優れたビジュアルデザイナーにどうしたらなれますか？」と尋ねられたベテランデザイナーの Jonathan Z. White 。 彼が現在習っている中国語を引き合いに、より優れたデザインを手がけるには基本原則をまず押さえることがいかに重要であるか、実際に活用できるテクニックや簡単な練習方法と一緒に紹介しています。 まずは、ビジュアルデザインを次のレベルに引き上げるためにマスターしたい、いくつかの基本原則を詳しく見ていきましょう。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 基本原則その1 : 書体の基本に戻ろう。 フォントやタイポグラフィーを見れば、デザイナーが何を実現しようとしたのか色々アイデアが巡るでしょう。書体は、デザインの基本といっても良いでしょう。 デザイン全体を書体のみで作成することもでき、選択したフォントに合わせてカスタマイズすることも可能です。デザイン
デザイン上級者になるために身につけたい、バーティカルリズムの正しい使い方
バーティカルリズム（Vertical Rhythm）はタイポグラフィにおける重要な概念ですが、絶対的なルールではありません。 Webのレイアウトをするとき、デザイナーやフロントエンドコーダーは縦方向より横方向のレイアウトに時間をかけるのが普通です。 これはそれほど不思議なことではありません。たいていのデバイスは縦にスクロールするように設計されているので、ページの横幅は高さに比べて制限があります。ですから、最初に水平方向のスペースを分割して考えていくのはごく自然なことです。 ベースラインのリズム ベースラインのリズム – 「バーティカルメジャー」と呼ばれることもあります – は水平ラインのグリッドで、文字を揃えるのに使います。学校で使ったノートに印刷されていたライトブルーの罫線のようなものです。 リチャード・ルターは次のように表現しています。 見出し、小見出し、引用、脚注、挿絵、キャプション
パララックスWebデザインまとめ(+無料プラグイン9個)
パララックス効果(英: parallax effect)をご存知ですか。 別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。 複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。 今回は、海外デザインブログfavbulousで、比較的新しく公開された、パララックス効果を利用したWebサイトを14個まとめたエントリー「14 Impressive Parallax Scrolling Website Showcase Inspiration」が公開されていたので、こちらを中心に、パララックス効果全般についてまとめています。 一緒にパララックス効果に使える、無料プラグインなどもまとめていますので、Webサイト制作に活用してみてはいかがでしょう。 詳細は以下から。 パララッ
魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ
インターネットが進化することで、ウェブデザインの作成方法は変化してきていますが、デザインや配色など基本的な要素で悩んでしまうということも多いのではないでしょうか。 あらかじめ利用する素材を揃えたUIコンポーネントを使えば、より手軽にそしてスピーディーにデザインをウェブサイト制作を進めることができます。 今回は、あらゆるデザインコンセプトやプロジェクト案件に対応でき、無料ダウンロードできるUIコンポーネント素材をまとめてご紹介します。Photoshop で利用できるのはもちろん、最近人気の Sketch や Figma、Illustrator にも対応する素材が揃います。デザインアイデアが欲しいときなど、今後の参考にしてみてはいかがでしょう。 詳細は以下から。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材まとめ iOS 10 GUI Kit Sketch / PS
UXデザインを改善する、参考にしたいアニメーションの使い道4つまとめ
動き（英: Motion）は物語、ストーリーを伝えます。たとえば「これを今、見てみましょう。」、「操作がうまく完了しました。」など、あまり長くなく、複雑ではないストーリーなどです。 アニメーションの目的は、ユーザーを楽しませることではなく、ユーザーが今何が起こっているか理解したり、より効果的なアプリの使い方を説明することにあります。このアイデアについて、Zurb では次のように述べています。 我々は、静的な画面スクリーンをデザインするだけではもはやありません。どのようにユーザーがスクリーン画面から、実際に閲覧するコンテンツに誘導できるかデザインすることが重要になります。 アニメーションは、美しさと機能性を統一するために、幅広いコンテンツに利用されています。ユーザーの行動やステータス状況、ユーザーの注目を集めたり、実行したアクションの結果をうまく伝えたり、さまざまな要素に影響しています。 今
ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
デザインに一番大事なのはセンスだと思っていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールとは？ ミズーリ工科大学の研究によると、Webサイトに対するユーザーの第一印象の94%以上はデザイン関連の要素で決まっているようです。また、なんと88%ものユーザーが、ユーザビリティの問題があったWebサイトを再び使わないと決めることも分かっています。 しかし、Webサイトのデザインには高度な技術力や美的感覚が必要だと思うのなら、考え方を変えてください。美的感覚は確かに重要ですが（なんといってももう2016年なのですから！）、Webサイトに必要なのは美的感覚だけではありません。実際、一番大事なことでさえありません。一番大事なのはユーザビリティであり、もっと実入りの多いWebサイトを確実に作るには、心理学のルールを使ってWebサイトをデザインしなければなりません。 ル
【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ
アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ
株式会社LITALICO（りたりこ）
障害は人ではなく、社会の側にある。 社会にある障害をなくしていくことを通して多様な人が 幸せになれる、 「人」が中心の社会をつくる。
テキストをより魅力的に演出できるCSSを使ったエフェクト12選「12 Amazing Text Effects Created With CSS」
TOP > Design > テキストをより魅力的に演出できるCSSを使ったエフェクト12選「12 Amazing Text Effects Created With CSS」 デザイン上に配置するテキスト。いろいろな入れ方や表現の仕方がありますが、絵的に配置するだけでなくそこに動きを加えることで、魅力を増すのではないでしょうか？そんな中今回紹介するのは、テキストをより魅力的に演出できるCSSを使ったエフェクト12選「12 Amazing Text Effects Created With CSS」です。 Magnetype 12選という限られた数ではありますが、どれも魅力的なものばかり。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 3D CSS Typography 3D化したテキストがさらにふわふわとした動きによって、より個性が強調されています
TeamPage (チームページ) - チームのための情報共有ツール
チームのための情報共有ツール 「teampage」（チームページ）は、仕事の「やったこと、わかったこと、次にやること」が蓄積され、ナレッジやノウハウとして共有・管理できるツールです。 無料トライアルを開始
新人UIデザイナーとエンジニアのための、デザインで即戦力になるための4つのトレーニング
4月になり、新卒で会社に入られた方や転職して新しい環境に移られた方がたくさんいらっしゃると思います。おめでとうございます。今回の記事では、新たな環境でUIデザインに取り組むデザイナーの方や業務でデザインの知見が求められるエンジニアの方に向けて、即使える知識やセンスを磨く方法をまとめてみました。 デザインの基礎、４大原則を知る デザインの４大原則は、『ノンデザイナーズ・デザインブック [第4版]』という本に書かれている重要なキーワードです。この４つを組み合わせることによって、誰にでもカッコイイ資料やWebサイト、アプリのUIを考えることが可能です。それが以下の４つです。 ・近接 ・整列 ・強弱 ・反復 ふだんの生活の中でこの４つを意識しながら色々なものを見てみると、それを作ったデザイナーの意図が感じられるようになってくるでしょう。 ノンデザイナーズ・デザインブック [第4版] プラットフォー
業務で使えるJavaScriptライブラリ「グラフ/チャート編」
d3.js オープンソース・ソフトウェア（BSD）。データの可視化ライブラリです。HTML/SVG/CSSを使ってアニメーションもサポートしたグラフ/チャートを表示します。jQueryと同じような使い勝手で高度なチャートを描けるのが特徴です。 以下はサンプルのコードで、指定されたSVGタグの色を変更します。 d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; }); SVGによる表現は多彩なので、単純なグラフやチャートと言った枠を越えた表現が実現できます。 使いこなすのはそうそう簡単ではありませんが、SVGを素のまま使うのに比べると大幅に手間は軽減されるでしょう。その上でjQueryライクにプログラマブルにSVGを扱うと言った目的に最適な選択になるはずです。 three.js オ
Icon Animations Powered by mo.js | Codrops
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li
UI/UXデザイン制作の参考に！見てるだけでも楽しいアプリデザインのギャラリーサイト９選 | SONICMOOV LAB
こんにちは。デザイナーのユウコです。 今回は、スマートフォンアプリのUIデザインの時に参考になるギャラリーサイトを集めてみました。 関連：様々なインタラクションを確認できるアプリギャラリーサイトUI Sources 目次 世界のクリエイター作品が集うギャラリーサイト Behance dribbble Pintarest UIデザインのパターン集 pttrns lovoly ui MOBILE PATTERNS アプリアイコンとスクリーンショット集 iconDrop iconsfeed App Screenshot 世界のクリエイター作品が集うギャラリーサイト まずは、世界中のクリエイターの優れたデザインが楽しめるサイトから3つをご紹介します。 これらはアプリ専門のサイト集ではありませんが、タグなどで絞り込むことで、アイデアにあふれるアプリの画面デザインをたくさん見ることができます。 Beh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社ジークス
Polymail
Material Design
Gitを一度はあきらめた人のためのわかりやすいスライド９選
