台湾の疾病管制署(日本の厚生省、アメリカの疾病予防管理センターに相当する機関)では2018年より、様々な疫病(感染症)の特徴を捉え、それを擬人化したアニメキャラクターを作成し、若者の関心を集め、疫病に対する正しい知識を身に着けてもらうという施策を行っている。 これらのキャラクターは『Disease』という雑誌の表紙を飾っており、疫病という悪役ではあるのだが、魔の魅力を放っているとして話題となっている。
2020年もあと残り1ヵ月、今年リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 明朝体、ゴシック体、デザインフォント、手書きフォントなど、盛りだくさんです! これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、もじワク研究から待望のフリーフォント。 私はさっそくすべてのデバイスにインストールして、愛用しています。 マメロン Hi-Regular 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 個人的にも特にお勧めの「マメロン」が、大きく変わりました。デジタルデバイスでの使用を意識してデザインされており、可読性が高いかわいいフォントです。収録文字はAdobeJapan1-3StdNに対応しており、JIS第一・第二水
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か?デザイナーは何を考えてデザインを作っているのか? という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
この記事は総合就業支援拠点『OSAKAしごとフィールド』が、さまざまな業界の魅力をみなさんにお伝えするための、業界魅力発信記事です。OSAKAしごとフィールドでは、キャリアカウンセリング・セミナーの開講などのサービスも実施しております。就職活動のヒントにぜひご活用ください。(全て無料・要登録) OSAKAしごとフィールドについてはこちら 突然ですが、クイズです。上の画像の文字は、ある1文字を除いて全てが手書きになっています。しかも、下書きをしないで「筆で一発勝負」で書かれた文字なんです。 この文字を書いたのは、大阪府の泉州地域に住んでいる2人の看板職人。上林修さんとの板倉賢治さんです。
修正になんでも応えてくれるデザイナーさんが上司からの「チーズ感が足りない」というダメ出しに全力で応えてくれた結果…ミルクシーフードヌードルの広告がこのような形になりました! https://t.co/0T7aFfBXtN
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考:position - CSS|MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか? ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの? ・結局一番言いたいことはなんなの? ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
歯肉炎おばけ @poisonlunchbox 普通のたまごアイコンに飽きた方の為に 半熟のたまごアイコン カマキリのたまごアイコン アリのたまごアイコン ボブの人 を作りました。 敬具 pic.twitter.com/2F75qMOuBp 2017-01-10 00:38:49
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
FREE for you, forever. 1,800種類ものミニマルにデザインされた、永遠に無料利用できるアイコン素材を紹介します。 PSD, AI, Sketch, SVGも完備されており、ダウンロードしておいて損はないですね。 1,800種類は多すぎるので、ごく一部 カテゴリは16、それぞれ100種類くらいある感じです。 Utilities Arrows Messages, Mails Emoji Map, Transport Tools Design Media Network, Web Users Time, Education Social Tech Shop Other Files, Folders アイコンの基本サイズは20x20pxで、鋭角と角丸の2種類でデザインされています。
世の中はデザインで溢れている。ブログを運営するとき、会社で資料を作るとき、普段の生活の中でも結構「デザインする」ことに直面する場面は多い。キレイで便利なテンプレートやテーマを使えば済む話だけれど、素人やデザイン初心者でも、少しでもデザインに関する意識があれば、仕事だけでなくプライベートでも応用がきくし、思考の幅も広がって楽しい。 デザインするということは何も特別なことではなく、一握りの絵心のある人が特殊なグラフィックツールや生まれ持ったセンス用いて、創造的な作品を生み出すことだけを意味するわけではない。 誰でもできるデザインもある。 そしてそれは、ちょっとした知識があって、何かを作るときにほんの少し気をつければいいだけの作業である。(このエントリーでいう「デザイン」とは、そういうものと定義する。) この記事では、デザイン初心者に向けて、デザインの簡単な7つの基本を紹介してみる。実際にこの7
デザインをしているときに悩んでしまいがちで、全体のイメージを決める重要な要素のひとつ、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、クリエイティブな作品をつくってみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 詳細は以下から。 デザイナーが持っていたい、すごいフリーフォント素材まとめ あさご本丸ゴシック 伝統的な雰囲気でありながらも、クルクルとしたループ状の線が個性的でモダンさを感じるエレガントな書体だそうです。 ※ 個人利用可能 Margurite 流れるように美しい筆記体スタイルで、リガチャ合字なども豊富に用意された、プロユースのデザインフォント。 ※ 個人利用
コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」(複雑な背景バージョン) オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー(Command/Ctrl+J)したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします!今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト! Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト! If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く