6ヵ月で学ぶ超実践型カリキュラム CURRICULUM 限りなく実務に近い要件と環境の中で、Webサイト制作の一連の流れと現場のリアルな緊張感を疑似体験できるのが、SLashの「超実践型」カリキュラムです。
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか? ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは? まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the w
こんにちは!ちゃんあいです。 毎週日曜日におこなっていた1週間の振り返りですが、今回は初めて月曜日になってしまいました…!昨日は疲労困憊だったので、惰性で書くよりも元気になってから書いたほうがいいと判断し、月曜日に持ち越しましたm(__)m 今回の記事では、「デザインメモ」はお休みして個人的なお話をしようと思います!それでは1週間のふりかえりです。 ■やったこと今週の作業内容はこちら ・LP制作 ・ECサイト学習 ・デザイン日記 今週はいろいろと用があり、作業量の少ない1週間でした…!今後は引き続き、せっせと積み上げていけるように頑張ります!! デザイン日記は無事に100日継続を達成しました(^^)/いろいろと変化があったので、詳しくはのちほどnoteにまとめて振り返ろうと思います! ちなみにデザイン日記開始当初の記事はコチラ↓ ■KPT(Keep、Problem、Try)今週の良かったこ
デザイナー兼踊り手のJona(@jona_yawaraka)です。わたしはLIGブログに掲載されるアイキャッチ(ブログ記事の顔になる画像)、バナー、背景ジャック(大型バナー)など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
「Hatchful」という無償のロゴ自動生成サービスが話題になっていたので試してみました。たくさんある画像やフォントを自動的に組み合わせ、ロゴを作成してくれるというサービスです。 手軽に利用できる反面、もしかするとアイコンなどはどこかのサービスと被る可能性はあるのかな、とは思いましたが、興味のある人はぜひ試してみてください。とにかく手軽です。 ロゴ自動生成サービス「Hatchful」を試す 特にユーザー登録なく使うことができます。 最初にビジネスの種類を選びます。ぼくは「Tech」にしました。 続いてビジネススタイルを選びます。ここは少し悩みましたが、何度でもトライすれば良いかと思い、なんとなく選びました。 ビジネスネームを入力します。日本語だとフォントがないので「NETAFULL」と入力しました。 ロゴを何に使うのかを選びます。 これでロゴが大量に自動生成されます! これでも一部なのです
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 (#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/) @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
ユーザーエクスペリエンス(UX)という言葉をよく耳にするようになりましたが UXってそもそも何だかわかりますか? 私はよくわかりません! そんなUXを、エンジニア目線で噛み砕いてみたいと思います 目的 UXとは何者か エンジニアとしてどう向き合えば良いのか 問題と対策 対象者 主にエンジニア UXってアレだろ・・・UXだろ? な人 UXを調べると目眩がする人 UXのUXは良くないと思う人 UXと聞くとズンドコベロンチョを思い出す人 注意 私はただのエンジニアです よくある「UXとは」よりも一歩引いて外側から考えます いろいろ喧嘩売ってるように見えますが、そんなつもりはないです(震え声) 要約 適当な要約 いろいろな経緯があり、UXのスコープは超広範となりました そのため、UXという概念は実践で安易に使えるようなものではありません UXの1機能レベルで見ると、有用なものもそこそこありますが、
今回の記事では、次のようなアイコンを使う方法をご紹介します。 アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっとご自分の好きなものも見つかると思いますよ。 アイコンを表示する方法 アイコンを表示する方法はいくつかあります。この記事では「HTMLのみを使用して表示する」方法を記載します。この方法では次の2ステップで済みますのでとても簡単です。 簡単2ステップ 1.HTMLファイル先頭にリンクを書く 2.アイコンを表示したい場所にタグを書く それでは具体的な方法を記載していきます。 1.HTMLファイル先頭にリンクを書く まずはHTMLファイルの先頭に次のように記載します。 <link rel="stylesheet" href="https://maxcdn.bo
こんにちは、tamuです。 最近、今の会社に転職して1年経ったことに気がつき、「自分はどれくらい成長したのだろうか?」と考えていました。 確実に成長したと言えることは、いくつもあります。 元々はWebデザイナーでしたが、iOSやAndroidのガイドラインをある程度理解し、WebだけでなくアプリのUIデザインもできるようになりました。 ユーザーインタビューやカスタマージャーニーマップといった定性調査・分析の手法を身につけました。 TECH::CAMPに通ってRuby on Railsを学び、小さな修正であれば、自分でプルリクエストを出せるようになりました。 一方で、LPやバナー作成等のビジュアルデザイン案件に関わることは少なく、そちらに関してはあまりスキルを伸ばすことができませんでした。 そんな中で「本当にこれでいいのだろうか?」「もっと色々学ぶべきでは?」という思いに駆られることがありま
プロダクト概要 「siori.design」…デザイン関連のWebサイト・記事にコメントを添えて投稿・共有できるサービス。2018年2月26日にリリース。 プロジェクト概要 夜の時間と週末の時間、わずか2週間で開発。Slack、GitHub、Sketchを駆使しながら全員がリモートで連携をとった。最初は小島氏がWordPressを使ってプロトタイプを作成。そこに吉竹氏が参加しデザインを、さらに熊田氏が加わってRuby on railsを使って本番のアプリを開発した。 デザイン特化型の記事共有コミュニティ「siori.design」 ー そもそも、なぜデザインに特化した共有サービスをつくろうと思ったのでしょう? 小島: デザイナーたちの情報発信に変化が起こっていて、日本でも情報を流通させるプラットフォームが必要になると考えました。ロゴの制作過程やブランドストーリーなどをブログに書くケースが増
海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の4カテゴリで情報がまとめられています。 Portfolios(ポートフォリオ) Resumes(履歴書) Resources(デザイン素材) Articles(投稿記事) オススメなページ順に、簡単に内容を紹介します。 Articles(投稿記事) ポートフォリオに関連した記事が読めます。 今のところ4記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く