日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
CSSのみのボタンデザイン – 現場で使ってきたボタンアイデア30選 | BUILD Journal
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン HTML<div class="button01"> <a href="">ボタンデザイン</a> </div> CSS.button01 a { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; bac
新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset
CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset値やrevert値など、見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています。 The New CSS Reset The New CSS Reset -GitHub The New CSS Resetの特徴 The New CSS Resetは何をリセットするのか？ The New CSS Resetの中身 2021年、モダンブラウザに適したCSSリセットのまとめ The New CSS Resetの特徴 この新し
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
2020年、注目されているWebデザインの最新トレンドと技術の進化
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。 最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。 Top Web Trends for 2020 and why they are coming by Jouan Marcel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。 磨りガラスのエフェクト ダークモード どこにでもグラデーション 洗練さ
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
Webデザイナー1年目で指摘された10のこと｜シロマ🏰｜note
Webデザイナーとして就職し、1年が経ちました。 会社の上司や学校繋がりの先輩、たくさんの方にご指導いただき、なんとか今までやってこれています。 なので、少し遅くなりましたが、1年目に指摘された点を10点、書いておこうと思います。 ①これからデザイン業務に携わる新人さんへ以下10点を気にして携わると、たぶんスタートダッシュが切れると思います。 ただ、失敗は悪いことではありません。みんな、通って来た道だよ〜わかるよ〜って言いたいがために書いてるようなもんです。 どうか自信を失わないで。一緒に頑張りましょう〜〜！！ ②新人さんを教育する中堅〜ベテランさんへ1年のうち、50回ぐらい同じ内容を指導するかもしれません。。大変お手数おかけします。 本人としても気をつけているつもりなんですが、所詮つもりで終わっています。が、１年経てばなんとか気づける程度には成長します。 本当に申し訳ありませんが、どうか
ウェブの今を体感！参考にしたい最新ウェブデザイン48個まとめ 2018年10月度 - PhotoshopVIP
メッセージを伝えたり、商品を販売したり、ポートフォリオや企業サイト、ブログやランディングページなど、ウェブページには制作したデザイナーのアイデアがつまっています。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 実例で学ぶウェブデザイン！参考にしたい最新スタイル見本厳選50個まとめ ウェブの今を体感！参考にしたい最新ウェブデザインまとめ The Art Center 子どもたちにデザインの楽しさを伝えるワークショップを開催しているサイトで、カラフルでシンプルなシェイプをつかった統一感のあるデザインが素敵。chu Cowboy アプリ
日本のWebデザインで見かける10個の特徴
ここ数年で、日本のWebデザインは大きく進化しました。 洗練されたデザインといえば、海外のものでしたが、今では日本でも数多く見られます。 デザインのスタイル、芸術的アプローチ、高度なソリューション、そして漢字や縦書きの文字を使ったデザインなど、日本のWebデザインで見かける10個の特徴を紹介します。 10 Distinctive Features of Japanese-Style Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ハイテクな演出 02. 他とは異なるソリューション 03. 日本独自の配色 04. 縦書き 05. 自然の風景 06. 巧妙なヒーローエリア 07. アニメに影響を受けたイラスト 08. キャラクター 09. 日本の漢字 10. 日本の伝統的な音 01. ハイテクな演出 W
2019年9月：最近読んだおすすめのWebデザイン関連書籍 | Web Design Trends
Webデザインを勉強したての頃は色々と本を読んで勉強していたけど、実際にWebデザイナーとして働き始めたらあまり本を読まなくなったという方も多いのではないでしょうか。 デザインのトレンドは常に変化していくため、できるだけ多くの情報を集めるように心がけないと、トレンドについていけなくなってしまいます。書籍というのは、まとまった情報を得るには最適な媒体で、Web上で情報を得る場合よりもしっかりとした知識を身につけることができますね。 こちらの記事では、最近読んだ本の中で、Webデザイナーの方やデザインを勉強している方におすすめの書籍をご紹介しています。おすすめの本ばかりなので、ぜひ参考にしてください！ 2020年版：Webデザインの勉強におすすめの本・書籍10冊＋α Webデザインの学習を行う上で2020年最新のおすすめの本を下記の4つのステップに分けて、合計10冊を選びました。 デザイン基礎
デザイン初心者がやりがちな失敗＆改善策がつまっている本！「けっきょく、よはく」レビューします | ベーコンさんの世界ブログ
具体的な指摘ポイント ・フォントが雰囲気にあっていないから変えた方が良い ・写真を切り抜いたらすっきりするよ ・情報の重要度を極端にしたほうが見やすくなるよ デザイナーはそれぞれの方法でデザインしますがから、「こういうやり方もあるか〜」と勉強になりますよ 言葉だけじゃなくて、実例が紹介されているのがいいですね。 あ、そうそう、これ余白だけの本じゃないんです！ 余白を中心とした、デザイン総合解説本です！ ここからはぼくの好きな４つのポイントを解説します ① 余白に対して考えられる まずコンセプトが面白いですよね。 この本のキャッチコピーは「デザインは余白が９割」 （実際９割ではないと思いますけど） 「余白を制するとなにか新しいデザインの力が手に入るのでは？」ってデザインをやったことがある人は、心のどこかに思っていることじゃないですか？ 余白には魔力のような力があることをみんな感じていると思い
独学でWebデザイナーになるためのWebデザイン勉強法
こんにちは！ Webデザイナーのおまめです。 私は実務未経験でWebデザイナーとして採用してもらったのですが、「美大も出てないのにどうやってWebデザイナーになったの？」と聞かれることが多くなってきました。 そこでこの記事では、私が全くの初心者から独学でWebデザインを勉強した方法や、Webデザイナーになるまでの過程を詳しく紹介します。また、未経験からWebデザイナーになった友人や先輩の体験談を集めて、叡智を集結させました。 独学でWebデザイナーを目指したい人はもちろん、副業でWebデザインの仕事がしたいという人にも必ず役立つ内容になっているので、ぜひ最後までご覧ください。 スクールに通う場合は…… 「デジタルハリウッドSTUDIO by LIG」では未経験から6ヶ月で「現場レベルの」Webデザイナーを目指せます。働きながら学ぶ社会人も多数です！ 「デジタルハリウッドSTUDIO by
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
とにかくカッコいいWebデザインを作るためのTips集 - Qiita
アイデアやテクニック集 かっこよく、見やすく、それでいて簡単に！ 気が向いた時にゆっくり目を通しておくと、デザイン考える時に便利ですね。 テクニック集 まずはこんな事できるっていうのを頭に入れておくとよいかと。 事例から学ぶ！Webアニメーションのテクニックまとめ これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ 最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger カッコいいサイト集 細かいパーツがわかったら、完成品を見るのが良いですね。 アニメーションのきれいなWebサイト10選 2017 Webデザイン・UIトレンド10選 UI/UXが優れている！2016年オススメのWebサイト・アプリ9選 実装する時のTips集 ライブラリを使えるならその方が早
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Cheat Site
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート
