非デザイナーの僕が「デザインぽい」ことをする時に使う便利ツール17個｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリに入りました！ こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
ウェブサイトなどのデザインを考える上で役に立つアドバイス25選
ウェブサイトやソフトウェアの作成において、機能の他にデザイン面も高い質が求められます。デザインにおいて良いもの・悪いものはいろいろありますが、「とりあえず守っておけば問題ナシ」なデザインのルールについて、プロダクトデザイナーのアンソニー・ホブデイ氏が解説しました。 Visual design rules you can safely follow every time https://anthonyhobday.com/sideprojects/saferules/ ◆01：真っ黒・真っ白は避ける ホブデイ氏いわく、真っ黒は画面上で不自然に見え、真っ白は明るすぎるとのこと。代わりに真っ黒・真っ白に近いグレーを用いることが推奨されています。 ◆02：ニュートラルカラー(無彩色)に手を加える ニュートラルカラーとは一般的に黒、白、グレーを指します。もしインターフェイスに何らかの色を使う場合、そ
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
株式会社ブラキオ｜埼玉県越谷市のJamstackが得意なWEB制作会社
Support your website by development.JamstackをはじめとするNext.js, React, TypeScriptを使ったフロントエンド開発、承ります。 フロントエンド開発・ホームページ制作をご依頼ならブラキオにお任せください。 株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。 モダンな技術でつくる高品質なソリューションを低価格でご提供します。 法人ではありますが、社長ひとりの会社です。 そのため安定した品質のご提供、細かいご要望への対応や迅速なやりとりができます。 SERVICE事業内容 WEBサービス開発Next.js,React,TypeScriptによるフロントエンド開発をメインにしており、特にComponentの設計を得意としております。 今まで業務委託としてジョインした複数プロダクトでの経験を活かし
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
マークアップを進化させる WAI-ARIA の基本
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
muuuuu.org運営者が教える名著「アイデアのつくり方」に倣った、Web制作における参考サイトの探し方
QUOITWORKSでディレクションとデザインをやっております、村松です。 とっても久しぶりな今回は、Webの受託制作で確実と言って良いほど行われる参考サイトの探し方について体系化された記事がなかったので、1940年から世界中の人々を魅了し続ける不変の法則。不朽の名著。ジェームス W.ヤングの「アイデアのつくり方」のつくり方を参考に、僕が10年以上のキャリアから手探りで模索したやり方をまとめました。 目次 1.まず最初にアイデアのつくり方はどのようにやるのか。2.なぜ参考サイトを集めるのか。3.何から着手、どんな観点で参考を探すのか4.実際に使ってるサイト。5.初心者がやりがちな誤った探し方、余談 1.アイデアのつくり方はどのようにやるのか。 まずアイデアの原理から説明します。 アイデアというのは「既存の2つ以上の要素を新しい一つの形に結びつけること関連性を見つけ出すのが上手い人が得意とさ
シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Bleed Layout Using CSS Grid by Josh Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのレイアウトにおける問題 解決策 CSS Grid 子カラムの割り当て方 子をフルブリードにする まとめ はじめに 以前、誰もが実装しようと努力したゴールドスタンダードのレイアウトがありましたが、そのレイアウトを正しく実装するのは非常に困難でした。 そのレイアウトとは、聖杯レイア
Web制作の面倒な作業におさらば！便利な最新オンラインツール30個まとめ
この記事では、Webデザインやグラフィック制作がぐっと快適になる、最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービスを利用すれば、これまで面倒だった作業も手軽に、そして短時間で行うことができ、普段のワークフロー改善にもつながります。用途や目的に応じて、お好みのツールを見つけてみましょう。 Web制作をもっと快適に！便利な最新オンラインツールまとめ CSS 3D Transform Examples 遠近感を利用した、奥行き感のある３DデザインをCSSで表現するサンプル集。コードをそのままコピーできるので、カスタマイズも自由自在。 BGJar ウェブサイトの背景デザインに適した、SVG画像をオンライン上で手軽に作成できる無料ツール。ボタン操作のみでカスタマイズを自由に行うことができ、商用利用にも対応しています。 VvvebJS 人気フレームワークBoots
Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック
HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。 このラッパーの在り方について、divがよいのか、sectionはどうなのか、コンテナとの違い、レスポンシブ対応の幅指定やpadding指定の効果的なテクニックなどを紹介します。 The Best Way to Implement a “Wrapper” in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Wrapper vs Container -ラッパーとコンテナ width vs max-width -widthとmax-width Additional Padding -追加のpadding どのHTML要素を使用するべきか <body>タグを使用 v
![[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/a295455180b3b8aecc4e6fcf4fa77f6224405f55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017082401.png)
React向けUIコンポーネントライブラリ、Material UI(v4)の紹介
注意書き あらかじめ言っておくのですが、今回はそこまで実践的なことは書いていません。 というのも、Material UI の機能を紹介するにしても、できることが多すぎてどこを抜粋するか悩んでしまったためです（苦笑） 公式ドキュメントを見ていただくとよくわかるのですが、あらゆる使用例、サンプルコード（JS、TS ともに）およびプレビュー表示が豊富に載っています。さらっと見ていくだけでも、こんなコンポーネントも用意されているのかと発見があって楽しいくらいです。 なので、提供されているコンポーネントに関しては、大まかな概要を紹介する程度にとどめます。 もし興味がわいた方はぜひ公式ドキュメントを見てみてください。 各コードには CodeSandbox へのリンクもあるので、お気軽に試せますよ。 2021/09/16時点で、5系が beta リリースされています 2021/09/16に5系がリリース
マテリアルデザインに使える配色をまとめたサイト「Material UI」 | ライフハッカー・ジャパン
フォームローラーでほぐし続けた結果...ようやくわかった効果とメリット3つ #Amazonプライムデー
React×Material-UIでモダンなUIを実装する
Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。前回はReactコンポーネントの基本であるPropsとState、およびライフサイクルについて解説しました。本稿ではデザイン性をアップさせてくれるサードパーティー製のコンポーネントセット、Material-UIの使用方法について紹介します。Material-UIは、Googleのデザインガイドラインに則って開発されたコンポーネントのライブラリで、活用することで簡単に見栄えのいいアプリを作ることができます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 macOS Sierra 10.12 Node.js v6.6.0／npm 3.10.3 Reac
react-navigation V5
概要react-navigationのバージョン5は結構色々変わりましたね。V3とV4はちょっと似てる感じがありましたが、V5は全然違うNavigationを使う感じでした。だから、このようにreact-navigation V5に関するブログポストを作成することにしました。 以前のバージョン(V3, V4)に関して知りたい方は、以前のブログを参考してください。 react-navigationreact-navigationのV5に関する公式サイトは下記になります。 公式サイト: https://reactnavigation.orgこのブログポストではreact-navigation V5を使う方法について説明します。 react-nativeプロジェクト生成ここで紹介するソースコードはtypescriptとstyled-componentsが適用されております。React Nativ
CSSで期待通りに表示されない根本的な原因の見つけ方
CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト構成表の作り方 ～Excel＆Googleアナリティクスと成績表の作り方【図解つき】～ | 今さら人に聞けないWebの仕組み
カラーユニバーサルデザイン 推奨配色セット ガイドブック第2版