中村紀洋コーチのN's methodの解説や立浪和義講座など、盛り沢山のオンラインイベント(編集部)
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール(14個) 2. パターンツール(7個) 3. イラスト系ツール(3個) 4. デザインツール(10個) 5. 配色カラーツール(6個) 6. グラデーションツール(3個) 7. SVGツール(8個) 8. スクリーンショ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか? この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
第二版 HappyHacking keyboard前史を追記します。 はじめに 現在、多くの方に支持頂いてロングセラーキーボードとなったHappyHacking keyboard(以下、HHkeyboard)ですが、初期の開発について記録を残しておく必要があると考え、主に技術的な側面での検討内容について文章を残したいと思います。 筆者は初代HHkeyboardからLite2までは企画・開発・製造・販売を担当、Proでは企画までを担当していました。 時代背景 和田英一先生とそのお仲間がHHkeyboardのアイディアを考案されたのは、PCがほぼIBM PC/ATの互換機に集約されつつあり、それにつれてキーボードもほぼIBM PC/AT配列(現在の一般的なキーボード)が標準になってきた時期になります。 SONYが撤退し、DECが消え、それまで研究用に使われていたワークステーションも段々と下火に
はじめに 社内でTodo管理の勉強会を実施した際に作成した資料があったのですが、今回自分の中の考えをまとめるせっかくの機会だと思い、字面で書き起こすことにしました。 意外と世の中では語られることのなく、『あたりまえ』として扱われてしまう『自己管理』について自分が半年間運用し、週ごとにカイゼンを続けたどり着いた、現時点でのHowを多くの人に伝えられればなと思っています。 もちろん最適解がこの形とは言いませんし、自己管理は人の数分だけ最適解はあると思っています。「みんな正しい、ただし部分的に」ということを念頭に、楽しんで読んでいただければ幸いです。 タイトルを付けた理由としては、かなりシステマチックな内容になってしまっていると感じてしまったため、「運用レベルが高い」人物を想定した結果、このタイトルになりました。 概念篇 『自己管理』を行っていく上で、確実に「ここは飛ばしてはいけない」と思ったた
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方(Adobe Illustrator)簡易的な描き方(Vector Draw Tool)ピート・ハインのスーパー楕円 Sou
こんにちわ!最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
モミー 【少年ジャンプ+編集】 @momiyama2019 「少年ジャンプ+」副編集長です。ほかに「ジャンプルーキー!」「MANGA Plus by SHUEISHA」など立ち上げました。リプライやDMの返信は気まぐれです。 shonenjumpplus.com モミー 【少年ジャンプ+編集】 @momiyama2019 先日、見知らぬ大学1年生から、漫画アプリのUIについて物申したい!というこんなDMが。 で、実際にお会いした。 話題はアプリの設計から、最終的には漫画表現の時代に合わせた進化など、広く漫画全体の課題や未来まで広がった。 結果、逆に僕の考えが整理されて意義深い時間に。学生氏に感謝! pic.twitter.com/Q6XZUtPAEi 2020-06-14 01:11:49
皆様におかれましても、今年の確定申告に向けて申告書を鋭意作成中のことと思います。 すでに散々論じられていることとは思いますが、この度マイナポータル、e-Taxを使用して本当にストレスで禿げそうだったので備忘録と同様の辛さを味わう方を救いたいという目的でこれを残しておきます。 スマホアプリ「マイナポータル」がただのバナーである 普通アプリとして存在してたらアプリ内で操作してると思うよね!残念!Sarafiでした! スマホアプリ「マイナポータル」のQR"読取り"の位置が非常に分かりにくい 通常使用するユーザーの99%はそのままログインしてしまうのでは?"アプリ内(実際はブラウザだが)"をいくら探してもQR読取りマークがみつからない。ログインする前の起動画面の下にひっそりあるので探してみてください。 スマホで作成できると謳いながら、PC用画面で操作をさせられ続ける これは何かの試練ですか?お年寄
あなたはスマートフォンを操作する際、どちらの手で持ち、どの指で操作するだろうか? おそらく誰しも基本の「型」があるはずだ。「みんな自分とだいたい同じでは?」と考えている人が多いかもしれないが、実はかなり異なっている。コンテンツ提供サイドとしては操作感への影響を意識しておく必要がある。 スマホの操作スタイルという、これまであまり気にしたことがなかった盲点ともいえる調査リポートを、調査会社のインテージが2023年1月27日に公開した。調査対象は日本を含む11カ国(日本、中国、韓国、インド、インドネシア、フィリピン、タイ、ベトナム、シンガポール、英国、米国)。サンプルサイズは各国500人だ。 ▼関連リンク(クリックで別サイトへ) 日本人のスマホの持ち方は独特?-国際比較調査でみるスマホ操作の国別傾向- 調査の趣旨は、タイトルの通り諸外国との比較で違いを浮き彫りにすることである。だがそれ以前に、「
sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル(ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス)について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました(利用者数については、ニールセンとICT総研の調査を元にしています)。このうち、16のサービスの運営企業から回答がありました(回答率は53%)。 回答した企
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji(@kenjinote)さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド(命令文)を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト(画像提供:@kenjinoteさん) 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
noteの更新が少々滞りました。理由がありまして、大仰に言うとアフタヌーン編集部の労務状況改善の余波です。僕はデジタル全般に弱く、noteに文章をアップするなんて自分じゃできません。なので、ワープロで文章を書いてアフタヌーン編集部のNという若手にメールで送って、アップする作業をお願いしていました。そのNの3月の総労働時間が少々長いという報告が来て、Nに「何が負担になってる?」と尋ねたところ、「●●が大変だけど、あとはnoteだよ!」とキレられました。も、申し訳ない。やり方を習うことにして、Nをnoteアップ係から外すということをしておりましたら更新が滞ったという次第です。 さて、早いものでゴールデンウィークです。お伝えしているように4月期はアフタヌーン作品の映像化ラッシュ! アニメ『天国大魔境』、アニメ『スキップとローファー』、ドラマ『おとなりに銀河』、アニメ『おとなりに銀河』、ドラマ『波
現代社会を見れば共働き夫婦が多いことなんて当たり前にわかるよな なのに冷蔵庫の設計なんなんだよ 冷蔵のスペース1番でかい設計をいつまで続ける気だよ 共働きで平日にちまちま買い物行けるわけねーだろ 冷凍庫や野菜室をでっかくしろ 製氷皿のメンテナンスができる機種が三菱のみってアホなの? 日本の男は冷蔵庫の掃除をしたことが無いからわかんないのかなー 冷蔵庫の棚もいい加減可動式にしろよ 何が「鍋も置けるように1番下の棚高さを上げました」だよ あんなもん1cmピッチで簡単に可動式にできるだろうがw ちなみに東芝はドアポケットだけ可動式になったんだが何故か片側だけwww なにその出し惜しみw 続き次はコンロとトースター。それに炊飯器 もうほとんど同じだが、洗濯機、扇風機に食洗機もだ
すげーのが出たぞーーー 誰よりも早く触って記事にしてみたかったので書きなぐってみた。 概要 PowerAutomate Desktopとは MS謹製のRPAツール。全てのRPA製品を過去にするかもしれないやべーやつ。 ついさっき(2021/03/02 23:00くらい)に発表されたばっかり。 インストールしてみる 1. MSのサイトにアクセス インストーラをダウンロード インストーラを実行→[次へ]をクリック 同意して[インストール]をクリック インストール完了 起動→利用開始 [サインイン]をクリック メールアドレスを入力 アカウントを選択 完了 作成画面を確認してみる フロー名を入力 別窓が出てきた ...なんか色々項目多くない? ざっくり確認してみた 変数 条件 ループ 遅延 システム ファイル フォルダー 圧縮 UI オートメーション UI オートメーション-Windows UI
こんにちは!三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初!2019年度グッドデザイン賞を取りました!!(ぱちぱちぱち) デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
認知バイアスとは、思考のプロセスにおける系統的な間違いのこと。簡単に言い換えると、思い込み。意思決定や判断を行う際の精神的な近道として機能するが、間違った判断を生み出すこともある。 年齢、性別、文化的背景に関係なく、誰もが認知バイアスの影響を受けていると言われる。 これを理解しておくことは、デザインを生業にする我々にとってはとても重要だと思う。なぜなら、人間である以上は、そこに認知バイアスがあり、それを熟知しておくことで、より適切なデザインをすることができるようになるから。 ユーザーエンゲージメントを向上させる7つの要素 認知バイアスが存在する理由我々の脳は、日々信じられないほどの量の情報を取り込んでいる。同時に、できるだけ思考エネルギーを節約したいとも思っている。そのため、難しい判断を迅速に行うために、一般論や経験則(ヒューリスティックとも呼ばれる)に頼っている。 脳がより効率良く判断を
以前の記事でフットスイッチが便利だという話をしました。 katsumakazuyo.hatenablog.com ただちょっと3つだと物足りなくなってきたので、ついでにもう3つ増やしてみました。 特に増やしたかったのは、句読点の他、改行とバックスペースでした。これキーボードで文字をよく使うのですが当たり前ですけれどもキーボードで打つのが当たり前だと思っていたのですが、これを足で出来るようになると本当にキーボード要らなくなります。 6つですとどこに何があるかわからなくなるのではないかと聞かれるのですが、パソコンのキーボードはもっともっとたくさんあるけれども私たちが覚えてるように、足の位置も6つぐらいであればだいたい覚えられます。 ほんと音声入力をする人にはフットスイッチはとってもおすすめです。キーボードに向かってよりかからなくなるので、前のめりにならずによい姿勢のまま入力をすることもできます
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く