Lightning Design System
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
Daily UI 100達成したので振り返り｜ミッツ
はじめまして。ミッツと申します。Daily UIという毎日一つお題に沿ってアウトプットを出すというサービスがあり、ふと思い立って始めたのが2018年9月末。途中他の制作に追われて中断を挟みながらこの前の連休で終了しました。正直に言うとLogo DesignとIconsetをスルーしたので達成してませんが、何となくその２つは、許してください。 なぜ始めたのか一応デザイナーという肩書を持っているものの、実際はディレクターぽい事が多くなってきて（自社にディレクターがいないので想像ですが）人に制作をお願いすることが多くなっている中、自分でも手を動かさないと自分のことを信用できないな…と思ったのがきっかけです。あと同人活動やってると自分にグラフィックセンスや配色センスが全然ないなーと思い知ることが多かったので、何かしら仕事とからむ所でアウトプットできればいいなと思いました。なので最初から正しいUIを
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
半年でUIデザイナーに転職？俺が3秒でデザイナーにしてやんよ!!｜Taiki IKEDA｜note
春は始まりの季節ということで最近Twitterで「UIデザイナーに転職した」という方を多数見かけます。正直とても嬉しいです。 「わたしがUIデザイナーになるためにやった10のこと」 みたなエントリーもよく見るようになりました。大変素晴らしいですね。昼は不満たっぷりの現職で働きながら夜はDailyUIをやったりコーディングの勉強をしたり、自分がやっていること、勉強の方法が正しいかどうか不安に思いながらも毎日コツコツ半年間頑張って.... ...遠回りし過ぎや!! かなり遠回りしているにもかかわらず、「僕たちこれでいいんだよね」と励まし合いながら集団で、かつとてつもなくゆっくりとしたスピードで走っている。万を持してポートフォリオを引っさげ企業を回るが現場で求められているスキルと自分のスキルセットがマッチしているかどうかも不明。そんな不幸をここ数ヶ月見てきて僕自身もなんとも言えない思いを抱えてき
『1週間UX+UIチャレンジ』という修行法でデザイナーへの道をハックしよう｜本間悠暉 / MESON
ARスタートアップMESONで、CEOのカジさん（梶谷健人）（『やさしいグロースハックの教科書』著者）から伝授された『1週間UX+UIチャレンジ』というトレーニングがめちゃくちゃよいです。 - UX+UIデザインが未経験の人が - 最短3ヶ月で知識0/実践0の状態からでもサービスデザインを行えるようになるための（3-6ヶ月でUX+UIでサービスデザインにジョインするための） - UX+UIの実践的なトレーニング方法 なのです。 職場や機会に恵まれないと学べないのが未だにUX+UIの現状だと思うので、UXやUIの本は読んだ事あるが実際に手を動かした経験がない人、誰しもができる実践トレーニングとして、この方法が使われていったら嬉しいです。 （※数冊のUX+UIの本を読んだことがある。sketchをudemyで学んで基本操作がある程度わかる人なら今すぐ実践できます） ではさっそく方法を！ UX+
FigmaではじめるUI（Web）デザイン｜Part2｜Nao Komura｜note
ただ、前回作ったものはデザインシステムの空箱でしかありません。 空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。 そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。 どうすれば横断的な組織をデザイナーという立場から作り出せるのか。それは僕にはまだ上手く説明できませんが、こちらの記事なんかはヒントになるかもしれません。（Takramさんの越境という思想はUIデザイナーとして成長していくにあたって重要なファクターになると思います。） とはいえ、組織のデザインはせずにスタイルガイド的な俺々デザインシステムを作るだけでも有用であることに変わりはないと僕は考えます。 のちのち自分の作ったデザインシステムが組織的に必要になる状況はありえますが、まったく不要になるという状況はほ
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
「信頼感の青」「安心できる緑」など色がマーケティングで果たす役割とは
By etaKate マーケティングにおいて「色」の果たす役割は非常に大きく、「購買行動の9割を目から得た情報によって決定している」という研究結果があるほどで、色をいかに上手く使うかがマーケティング成功のポイントの1つです。企業は実際のところどのように色を使っているのか、それはどのような効果を生んでいるのか、SNS専門のコンサルティング会社Bufferのレオ・ウィドリッチ氏が実例を使ってまとめています。 Why Facebook Is Blue: The Science of Colors in Marketing - The Buffer Blog http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue 多くのウェブサイトや企業のロゴイメージにおいては、ある明確な目的があってその目
【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
favico.js
favico.js v0.3.10 Make use of your favicon with badges, images or videos View on GitHub Try it: +1 -1 Set icon Play video Start webcam Reset Works on Chrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
Rubyで関数合成とかしたいので lambda_driver.gem というのを作った - ( ꒪⌓꒪) ゆるよろ日記
LambdaDriver by yuroyoro Rubyで、Procやlambdaで関数合成できるようにしたかったので、lambda_driver.gemというのを作った。 内容的にはこの辺で書いたヤツをgemにした感じ。 「関数型Ruby」という病(2) - 関数合成 Proc#compose - ( ꒪⌓꒪) ゆるよろ日記 「関数型Ruby」という病(3) - カリー化(Proc#curry, Proc#flip) - ( ꒪⌓꒪) ゆるよろ日記 こんな風に、カッコよくコードが書ける。 require 'lambda_driver' # [:foo, :bar, :baz].map{|s| s.to_s }.map{|s| s.upcase } # [:foo, :bar, :baz].map(&:to_s).map(&:upcase) [:foo, :bar, :baz].map(
【商用無料】SVG形式のシンプルなベクターアイコン60個セット
自作アイコンがたまってきたので、特に自分が良く使うシンプルなアイコンを配布してみます。SVG形式でイラストレーターで編集できます。アイコンは、商用無料でクレジット表記なしでお使いいただけます。 ご使用にあたって 以下を守ってお使いください。 禁止事項 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク 許可事項 ○ パスの変更・着色・拡大縮小などの加工 ○ 商用・非商用サイトでの使用 ○ Web、プレゼンなどの資料、ソフトウェア、印刷物への利用 ある程度縮小しても、視認性を保てるようにつくりました。また、シンプルなので、どんなサイトでも使えるかなと思います。お役に立ちましたら幸いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
商用利用無料、スマフォ向けユーザインターフェイスの引き出しを増やすPSD素材 -Flatastic Mobile UI Kit
WEBCRE8.jp
Todd Hido
https://ameblo.jp/ca-1pixel/entry-11497184837.html