JRと東京メトロの運休告知のデザイン、何故あれだけわかりやすさに差が出てしまったのか？その考察がおもしろい！
猫村ゐき (Nekomura Wiki) @lll_anna_lll JRと銀座線、ぼくは銀座線の運休しか記憶になかったわけだけど、デザインの差では。 どちらが移動中の社畜どもに「運休します」という情報を一瞬で理解させる可能性が高いか。 人間は自分に関係なさそうな情報は、詳細を読まない。 pic.twitter.com/bJ86OtiDCI 2019-11-16 16:26:49
猫村ゐき (Nekomura Wiki) @lll_anna_lll JRと銀座線、ぼくは銀座線の運休しか記憶になかったわけだけど、デザインの差では。 どちらが移動中の社畜どもに「運休します」という情報を一瞬で理解させる可能性が高いか。 人間は自分に関係なさそうな情報は、詳細を読まない。 pic.twitter.com/bJ86OtiDCI 2019-11-16 16:26:49
はじめに1998年、デザインの勉強を全くしたことがない私がデザイン業界に入り、はや22年が経ちました。数年間は下っ端生活をしていましたので、まさか20年経ってこの会社の社長になるとは、当時の自分が聞いたら失神するでしょうね…。 そんな私は、デザイナーとして際立ったスキルや作風もなければ、立派な賞とも縁がないごく普通のデザイナーなわけですが、22年間楽しく続けてこれたのはなぜだろうと思うと、デザインという仕事を通して成長が感じられるからなのかもしれません。 このnoteでは、デザインの技術ではなく、デザイナーとして成長を実感していくための「デザイン脳」の鍛え方について書きたいと思います。デザイナーとして成長したい！と思っている方の一助になれば幸いです。 思考の変遷を残しておくデザインの経験を積んでいくと、「前よりうまくなったな」と思うはずです。うまくなったというのは、デザインの原理原則が身に
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
デザイン思考がもてはやされてしばらく経ちましたが、デザイン思考の成功例、何か思い出せますか？仮に思い浮かんだとしたら、その「成功例」は本当にデザイン思考によって生まれたものですか？ 一応最初に断っておきますと、僕は「デザイン思考はゴミだ」と言っているわけではありません。デザイン思考（デザインシンキング）にも向き・不向きがあるのに、その特性を踏まえないまま変なバッターボックスに立たせた企業が大変シュールな状況に陥っていることを、普段デザインで事業成長を支援している身として危惧しているというわけです。マイナスドライバーでプラスのネジを回すのはやっぱり無理があるし、おもしろTwitterおじさんだった人に大統領をやらせたらそりゃみんな怪我するよね、という単純な話です。 著名デザインファームPentagram New Yorkのグラフィックデザイナーであり教育者でもあるNatasha Jenは「D
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
ブラウザで動くサービスを作るときの技術選定
はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
「日本人の好むセンスがこれ」映画のポスター、楽天のページ、商品パッケージ… 『説明的でわかりやすい』ものにしないと売れないという話
halno_旅の写真家 @halno_IG 映画ポスターが盛り上がってますが、現代の「一般的な」日本人の好むセンスがこれなんです。こうしないと売れない。広告、POP、パッケージ。権威的で失敗しない、説明的でわかりやすいのが好きなんです。良いか悪いかは別として、うまいことやってるなぁと思う。ストゼロなんて99.99の10倍売れてるし。 pic.twitter.com/fXWmDyMCBX 2020-02-11 21:46:50
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
高齢処女ができあがる一例
私は30代前半の女である。 男性とお付き合いした経験はあるけれど、処女だ。 母親がやたらと婚前交渉を悪だと思っていて、私が10歳の頃に映画かなにかでカップルだったか夫婦だったかがセックスした感じの表現を早送りで飛ばして、映画(かなにか)が終わったあと少なくとも私にとっては唐突に「増田ちゃん、結婚するまで男の人とこういうことしちゃだめだからね。約束して。もし結婚もしてないのにこういうことになって、あんたが大変な目にあっててもお母さんは何もできないから。お母さんもお祖母ちゃんもそうやって生きてきたから、あんたも守ってほしい。守れなくて、もしだまってそういうことしちゃったら絶交する。約束守れる？」 大体こんな感じの事を言われたと思う。 私の頭に強く刻まれたのは母と「絶交」という考えもつかない状況への恐怖だった。 普通に考えればなんとも幼稚というか、なんでそこで個人として「絶交」すんねん、という謎
こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI
決算説明会資料というものがあります。株主に向けて、当期あるいは通期の決算説明を行うための資料です。主に企業のIR室（Investor Relations）、つまり企業が株主向けに現況や今後の見通しを広報する活動を主に実施する部門が書きます。 そのIR室の役割の一つに決算説明会資料の作成がありますが、これはすごく骨の折れる作業な一方で、報われない作業でもあります。なぜなら、IR担当部という全然力がないような部が、関係各所に数字をもらったり現況を把握したりレビューしてもらったりし、その上えらい人からも余計な口出しが色々と入るからです。労多くして、という典型例ですね。 しかし、今回ご紹介するGoodpatch社についてはそれはあてはまりません。なぜなら、Goodpatch社は「デザイン」という業務が事業に大きく影響するからです。そんな会社が、自社の発表する資料で手を抜くわけがなく、またそれの見栄
身につまされる英語力問題。手っ取り早く英語を習得するなら海外に行ってしまうが最善なはずですがこのコロナ禍、身近なところで英語に触れつつ技術も勉強したい？といえば、動画です。 10 Developers You Should Follow to Improve Your Skills (スキルを上げるための、フォローすべき開発者10選) という記事があったので10人をまとめた。プラスオマケ。それぞれ実際に動画を見てみての補足付き。 1. Ben Awad (ベン・アワド) ソフトウェア開発者。React、React Native、GraphQL、Typescript、Node.js、PostgreSQL、Python、その他あらゆるコーディングについて紹介。React.jsやGraphQLの開発者にお勧め。ビッグ／テック コーディングインタビューの準備を手ほどきしている。「アルゴリズム形式の
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
2022年上半期にリリースされたものを中心に、ひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 作品にインスパイアされたフォント、漫画や同人誌にぴったりなアンチック書体、プログラミング向けのフォント、タイトルやコピーに使えるデザインフォントなど、たくさんのフォントがリリースされています。
Facebookで配信されてる広告一覧が見られるサービスがあるらしい…… 「世の中にどれだけの闇みてぇな世界があるか見られる」
よんてんごP @yontengoP 仕事関連で知ったんですけど Facebook配信されてる広告一覧が見られるサービスってのがありまして 適当な検索ワード入れて調べると 世の中にどれだけの闇みてぇな世界があるか見られるのでオススメです。 pic.twitter.com/uUss7ZDjmr 2021-10-01 01:14:16
Low-Level Academy
In this course, you will learn how to work with the UDP and TCP internet protocols in real-world scenarios. You will apply your skills to build small, fun networking applications in Rust — right in your browser! No previous knowledge of network programming is required, but we assume that you are familiar with Rust syntax. If you’re not, that's fine too! You can read The Rust Book and learn by prac
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
やってはいけないUIアニメーション
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから１つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 欧文のルール日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 「＆」の正体正式にはアンパサンド（ampersand）と言います。日本では「アンドマーク」と呼ばれていることが多いこの記号。正しい名前は“ampersand”（アンパサンド）です。日本でも馴染みのある記号で、企業名などでもよく目にするのではないでしょうか。 情報通信・メディア系
「図解」は資料作成やプレゼンスライドの制作に欠かせません。その一方で「図解を作成してみたいけれど、経験がない」「これから図解をどんどん取り入れていきたい」という方のために、図解作成のノウハウを基本中の基本からまとめてみました。 今回の記事はアドビ社のPR企画「みんなの資料作成」に参加して執筆しています。 1 | 図解の定義まずは「図解」の定義について考えてみましょう。 たとえば、書籍『たのしいインフォグラフィック入門』の中で著者の櫻田 潤さんは次のように定義されています。 図解とは、単純な図形と短い言葉で、物事を説明するグラフィック 非常に明快ですが、人によって定義が異なりますし、また時代によって移り変わっています。 類語から「図解」の定義を探る言葉の定義を考える際に有効なのが〈類語〉を集めてみること。 そこで、日本語／英語に分けて、2つのマンダラート（9マスのメモ）をつくり、「図解」の類
2020年の終わりに私たちLoose Drawingは始まりました。最初のころは、訪問者数が1日3人、5人という日もありましたが、今では月間10万人以上の方々にご利用いただいており、この場を借りて心から感謝申し上げます。 しかし、サービスの成長とともに運用コストも増加しています。私たちは、ユーザー体験を最優先に考え、広告は最低限に留めており、広告を増やして収益を上げることもできますが、それは私たちの理念に反します。 ここで皆様にお願いがあります。もしLoose Drawingが皆様の創作活動に少しでも役立っているなら、私たちにコーヒー１杯分のサポートをしていただけないでしょうか。皆様からの温かいサポートが、私たちのサービスを継続し、さらには発展させていく力となります。
どうもご無沙汰しておりますせんざきです。 最近、デザインを見る訓練をすごく重視してやっています。 このテーマは、タイトルだけ書いておいて、まだ書く時じゃないなあと思いながら温めていたものです。 正直まだ、書く時じゃないなあという感じもするのですが、どういうことなのか言語化できそうな段階まで来たので、メモがわりに書き起こしていこうと思います。 はじめにまず、「デザインを見る訓練ってなんやねん」っていう話をします。 本当にここ数ヶ月、デザイナーにとっての見る力の大切さを日々感じているんです。 このツイートは、見る力について書いていて、結構反響があったものです。 原研哉さんが運営してる低空飛行っていうサイトがあるんですけど、ここの写真や映像、iPhoneで撮ってるらしい、、 目が良ければiPhoneでもこんなに綺麗に撮れるんだなあhttps://t.co/S7WBO3JSG8 pic.twitt
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
かけだしちゃん @kakedashi_chan 未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん その4 キラキラWEBデザイナーへの第一歩！SNSアカウントを作るよ～！ #Web制作 #webデザイン #コミックエッセイ pic.twitter.com/Tu7NZAFyG7 2022-01-21 20:00:59
岩崎光明 プロフィール 1982年よりフジテレビタイトルデザイン室でタイトルデザイン、イラストなどの制作を担当。 代表作は「邦ちゃんのやまだかつてないテレビ」「ウッチャンナンチャンのやるならやらねば！」 「ダウンタウンのごっつええ感じ」「世にも奇妙な物語」など。 この連載では主にアナログ時代のタイトルデザインについてご紹介します。 題名の“美術タイトル”（略称は美タイ）は河田町フジテレビ時代の名称。美術タイトルは報道以外の全番組を担当していました。 報道番組の写植などを制作する“報道タイトル”は報道部にあり、役割は全く違っていました。 フジテレビタイトルデザイナーのレジェンド紹介第二弾はあの国民的番組のタイトルデザインを担当した高柳義信さんです。 代表作は『笑っていいとも！』 高柳さんのデザインの特徴は、なんと言ってもわかりやすいデザイン。イラストやグラフィカルなシンボルを取り入れたデザイ
プロのデザイナーによる、「覚えておきたい写真構図」をまとめた画像に反響が集まっています。これを意識すれば、初心者でもセンスの良い写真が撮れるかも。 サンプル画像つきでイメージしやすい（画像はクリックで拡大します） 投稿者はWebデザイナーのもち（@makiko_sakamoto）さん。「三分割構図」「三角構図」「S字構図」など、12種類の写真構図の特徴や効果が分かりやすく解説されています。SNSの投稿のような、普段のちょっとした写真撮影にも生かせそうな実践的なテクニックです。 投稿には、「うまく写真を撮りたいって思ってもなかなか…だったので参考になります」「これはすぐ使える、ありがたい」「めちゃくちゃ為になるやつ こういう基礎の構図が分かってることが大事だよなぁ」などのコメントが寄せられていました。 もちさんはこの他にも、Webデザインに役立つTipsやデザイン集をTwitterに投稿して
本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。 ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。 また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechnology RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
note.com 僕の間違いじゃなければ、時々はてなのブログでコメントを頂いた方のように思う。Python関係で。大変お世話になりました！ 法人の設立にあたっての事務処理と、会社運営のお気持ち編を、自分の体験からまとめてみます。2016年6月にノリ（そうだ独立しよう）だけで起業して7年ほどひとり。今は2人体制になった。 会社を大きくする方法はなんもわからんので、そういう内容を期待される方はすいません！沿わないと思う！ 1. 決算処理は専門家に任せたほうが良い 自分は前職の会計事務所でお世話になったため、起業当初から会計事務所を利用させてもらっている。年間30万弱。決算処理込み。 6月1日に創業したけど、タイミング的に6月になっただけで、深い意味はなかった。会計事務所的に3末はGW進行と重なるので避けたほうがいいかも。 決算処理は確認しないといけない事項が多すぎて、素人がいくら確認しても漏れ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン脳を鍛える方法｜ハラヒロシ / デザインスタジオ・エル
2024年に最適なfont-familyの書き方 - ICS MEDIA
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
なぜデザイン思考はゴミみたいなアイデアを量産してしまうのか｜サカキバラ・ケイ
Sign-in form best practices | Articles | web.dev
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
CSS Stock｜Web制作を楽にするCSSコピペサイト
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた｜Aoi Sano | デザイナー
【パワポ研の決算資料探訪①】Goodpatch社の決算説明資料はシンプルが故に美しい｜パワポ研
英語力と技術力向上のための海外Tech系Youtuber10選 +n - Qiita
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times
フリーフォントの作者様に感謝！ 最近リリースされた日本語フリーフォントのまとめ -2022年上半期
Adobe、無料の「Creative Cloud Express」投入。デザインの心得がなくても高品質コンテンツを簡単に作成可能に
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
＆（アンドのマーク）は使わない｜しじみ ｜デザインを語るひと
図解がつくれると伝わり方が変わる！ 初心者のための図解作成ガイド【事例あり】｜鷹野 雅弘
無料で商用可のフリーイラスト素材｜Loose Drawing
デザインを「見る」訓練をしている話。4つのステップと勉強法｜せんざき｜n2p designer
デザインに活かせるフレームワーク20｜金 成奎
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん完結「最初からずっと不穏だ…」
はい！美術タイトルです vol.3 ｜ フジテレビジュツのヒミツ - フジテレビ
「これはすぐ使える」「めちゃくちゃ為になるやつ」 プロのデザイナーが教える写真構図まとめが勉強になる
Micro Frontends Architecture Patterns
ひとり会社の起業について学んだ10のこと - GoTheDistance