こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
最近の若者はパソコンが得意だと一括りにされる傾向があります。実際、今の４０代以降の人と違って、大なり小なり学校の授業でパソコンを使う経験があるので、彼らと比べれば慣れてはいるでしょう。 しかし、それで面接の時なんかにパソコンが使えると認めてしまうと、後からとんでもないことになりかねません。 今回の記事では、筆者の実際の経験を交え、企業側が以下にパソコン使えますをハードルの高いものに設定しているのか解説していきます。 企業が求めるパソコンスキルとは オフィススキル Webサイト作って 会社の業務管理システム作って まとめ 企業が求めるパソコンスキルとは オフィススキル これはまあ序の口でしょう。学校の授業でもなんどか触れることがあるでしょうし、ワードエクセルパワーポイントの三点は当たり前に習うと思います。 筆者も当然これは習っていたし、会社のデータを纏めたり文書作成やプレゼンテーションの資料
人気メディア「LIGブログ」の編集長が語る！ 成功と失敗から学ぶオウンドメディア運営術 | 【レポート】デジタルマーケターズサミット 2024 Winter
「Web担当者Forum」とほぼ同時期に生まれ、創刊17年を迎えた「LIGブログ」。平日はほぼ毎日更新しているご長寿オウンドメディアだが、安定して運用を続ける秘訣とはなんなのか、気になっている担当者も多いだろう。 「デジタルマーケターズサミット 2024 Winter」では、LIGインハウスマーケティング部の齊藤麻子氏が登壇。ブログ運営のノウハウからB2Bのマーケティング戦略まで、失敗談を交えながら赤裸々に語った。 LIG インハウスマーケティング部 マネージャー 齊藤 麻子氏 デジタルマーケの成果を最大化するWebライティング 「LIGブログ」の事例から学ぶ！ オウンドメディア運営の秘訣とは？ システム開発・Web制作・マーケティング支援などを幅広く手がけるLIG。2007年の創業当時からオウンドメディアを運用しており、「おもしろブログの会社だ」という印象を抱いている人も多いかもしれない
iPad Pro (M4)はUltra Retina XDRディスプレイの採用により、11インチモデルでもプロクリエイター向けの正確で一貫性のある色を再現する「リファレンスモード」が利用でき、SideCarを使えばMac用のリファレンスモニタとしても利用可能。
iPad Pro (M4)はUltra Retina XDRディスプレイの採用により、11インチモデルでもプロクリエイター向けの正確で一貫性のある色を再現する「リファレンスモード」が利用でるようになっています。詳細は以下から。 Appleは日本時間2024年05月15日、Apple M4チップとタンデムOLEDテクノロジー採用のUltra Retina XDRディスプレイを搭載した新しい「iPad Pro 11インチ/13インチ (M4)」モデルの販売を開始しましたが、 このiPad Pro (M4)シリーズでは全てのモデルにUltra Retina XDRディスプレイが搭載されたことで、11インチモデルでもデジタルシネマ編集や高解像度写真、Webデザイン、出版物の編集などの正確で一貫性のある色と画質を必要とするプロクリエイター向けの「リファレンスモード」が利用可能となっています。 Ref
最近、「Webデザイナーのかりん」を名乗る者（以下「情報発信者」といいます。）が、「かりんのWEBデザイン学習帳」と題するブログやSNS上において、Webデザインの学習サービスについて発信しております。当社は、この情報発信者について、合同会社アクシス（所在地：東京都港区浜松町二丁目２番１５号浜松町ダイヤビル２Ｆ。現代表社員：松井颯人。旧商号：合同会社cyber base）の当時代表社員であった鈴木七海氏であるとの情報に接しました。 情報発信者と当社との関係に関して確認のお問い合わせをいただいておりますが、当社の保有するコンテンツについて、現在及び過去において当社が情報発信者に対して何らかの権利を譲渡し、又はその利用を許諾した事実は一切ございませんことをお知らせ申し上げます。
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます！ 最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。 デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。 Create.xyzで出来ることCreateを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。 プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。 基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください！⬇️ と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあ
「人間中心設計」への誤解。デザイン倫理を“他人事”にしないために——コンセント・長谷川敦士【連載】デザイン倫理考 #1｜designing
「人間中心設計」への誤解。デザイン倫理を“他人事”にしないために——コンセント・長谷川敦士【連載】デザイン倫理考 #1 広義の「デザイン」は、デザイナーだけではなくすべての人が身につけるべきスキルであり、マインドセットになっていく。そして、デザインが社会の中で果たす役割が大きくなればなるほど、そこには高い倫理観が求められるようになります。 2024.05.11 デジタルテクノロジーの社会的影響力のさらなる高まりが見られる昨今、デザイナーの中でも「デザイン倫理」の重要性が語られることが増えている。 変化し続ける社会の中で、デザインを取り巻く人々の間で「倫理」を議論する場所をつくれないか——そんな問題意識から、designingでは新たに、一線級のデザイナーや論者に「デザイン倫理」のあり方を問う連載「デザイン倫理考」を立ち上げた。 連載第1回に話を聞いたのは、コンセント代表取締役社長の長谷川敦
Webサイトやデザイン制作で、やたらと時間がかかってしまうとお困りのクリエイターの方へ。 この記事では、SNSなどでいま話題の最新ツールやフリー素材を50個まとめており、制作時間を短縮したいというひとに選ばれています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 AI関連ツール RenderNet – Create AI images with Unmatched Control 一貫性のある同一人物によるキャラクター画像を生成できるAIツールで、人種やスタイル、性別などはもちろん、顔はそのままでポーズの変更や、背景の再生成などが可能。 Textify — Fix text in images — Storia AI 元の背景を維持したまま、シームレスに文字テキストのみを変更できるAIツール。既存のフォントスタイルに合わせることも、新しいものを
note.com 僕の間違いじゃなければ、時々はてなのブログでコメントを頂いた方のように思う。Python関係で。大変お世話になりました！ 法人の設立にあたっての事務処理と、会社運営のお気持ち編を、自分の体験からまとめてみます。2016年6月にノリ（そうだ独立しよう）だけで起業して7年ほどひとり。今は2人体制になった。 会社を大きくする方法はなんもわからんので、そういう内容を期待される方はすいません！沿わないと思う！ 1. 決算処理は専門家に任せたほうが良い 自分は前職の会計事務所でお世話になったため、起業当初から会計事務所を利用させてもらっている。年間30万弱。決算処理込み。 6月1日に創業したけど、タイミング的に6月になっただけで、深い意味はなかった。会計事務所的に3末はGW進行と重なるので避けたほうがいいかも。 決算処理は確認しないといけない事項が多すぎて、素人がいくら確認しても漏れ
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
「リスキリング（Reskilling）」とは、新しいスキルや知識を身につけて、変化する労働市場や技術の進歩に適応するプロセスのことです。具体的には、「学び直し」という意味で、英語では「Reskilling」と表記されます。"Re"は「再び」を意味し、"Skilling"は「スキルを磨く」を意味します。 リスキリングは、新しい仕事に就く際に必要なスキルを身につけておくことを指します。なぜなら、技術の進歩によって、以前は人間が行っていた仕事が機械に置き換えられることがあるからです。同時に、デジタル化によって失われる仕事もありますが、新しい仕事や業務も生まれます。 リスキリングは、主にデジタル関連のスキルや知識の獲得を指すことが多く、欧米では2016年ごろから成長分野に人材を移行させる取り組みが進んでいます。日本でも、2022年には政府が「新しい資本主義」という政策を掲げ、リスキリング支援に力を
はじめまして。 株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日はデザインフィードバックを成功に導くための６つのヒントについてお伝えします！ お時間の無い方は「チェックリスト」だけでもサクッと目を通してみてください✅ デザイナーの皆さま。 クライアントのフィードバックを受ける際、どのような準備をしていますか？ 恥ずかしながら、私がデザイナー駆け出しの頃は「フィードバックを受ける準備」を怠っていました。 その結果、大規模な修正やスケジュールの圧迫、フィードバック通りにやったのに満足度が上がらず、 最後には方向性を見失う事態に。 まさに「こんなはずじゃなかった！！」という状況でした。 このような状況は事前の準備や心構えで軽減できます。 時間に追われながら身を削って修正をしたあの日を繰り
優れたデザインや見せ方で話題となっている、国内外の最新Webデザインをまとめてご紹介。 10年以上Webデザイン観測を行っている筆者が、「これはやられた！」とワクワクさせられたサイトや、2024年のデザイントレンドを採用している最新デザインを中心にピックアップしています。 「アイデアが枯渇してて、、」そんなときのインスピレーションのお供にいかがでしょう。 アイデアを刺激する、みんなの最新Webデザインまとめ Collecting Stamps on Yoshida Trail, Mt. Fuji 山梨県側の富士山の北側から山頂を目指す「吉田ルート」からの登頂の記録を、インタラクティブに残したアートプロジェクト。 サントリーニ ホテル＆ヴィラズ 宮古島 沖縄の宮古島にあるホテルの公式サイトで、訪れてみたくなる美しい風景画像をふんだんに利用しています。コンテンツの切り替えにユニークなシェイプを
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下
【React 学習】プログラミング初心者が React の実務に入るまでに学習したこと - Qiita
はじめに 今回は、プログラミング初心者の自分が React の実務に入るまでに学習してきたことについて解説していきます。 就活的な内容は省いて、色々学習してきた中で良かった教材をピックアップしていきます。 それでは、頑張っていきましょう。 Progate まずは Progate をしました。Progate が出している講座は殆ど勉強したかと思います。 これで、なんとなくプログラミングの基礎は身に付きますが、まだ殆どコードは書けません。 ただ、他の教材を学習する際に Progate でプログラミングの基礎を学習しておいたのがかなり役に立ちました。数ある教材の中で、一番分かりやすいかと思います。 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 HTML・CSS に関して様々な動画・本を学習しましたが、この本が一番良かったです。 「一冊ですべて身につく」と書いてある本ですが、同
こんばんは。 かねてより制作をしていた、WEBサイト「印象をただようアトリエ」リリースいたしました。 今回はそのお知らせです。 サイトは、こちらから。 atelier-lavandula.com 今回のサイト制作は、WEBデザインをされている、モリモ様に依頼して制作していただきました。 去年秋より、制作をお願いしまして、なんとイラストはすべてサイトのための描き下し！ 私のなかにあるイメージをばっちりと素敵な形にしてくださり、感謝の気持ちでいっぱいです。 サイト内のクレジットのページにご紹介があるので、ぜひ覗いてみてください。 ◇ サイトイメージは、「絵本のなかの世界」です。 私は、たまに作曲したり、小説を書いたりしているのですが、「印象をただよう」世界観によく出てくるモチーフをぎゅっとつめこんでもらいました。 夜の庭、噴水、音楽広場、後ろに広がる湖、その奥には針葉樹の森。 植物のラインナッ
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
まふ @mafu_todo ANAの404もいいというりぷを見たので見に行ってみた 確かに綺麗な青で良き✨ (個人的には404という数字は残してほしいなという気持ちはちょっとある) pic.twitter.com/Ip2Dm8oPZ6 x.com/sawaratsuki100… 2024-04-26 10:41:21
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
4月25日 当たり前のこと - HONEST
木曜日、 当たり前のことが、当たり前にできなくなったら、それは限界と言えるのかもしれない。 基本的に12時間以上は会社に滞在している僕。 「いつ休憩してるの？タバコも吸ってないのに」 そう言われて、ふと気が付いた。確かに、いつ休憩してるのだろう。 今の部署は、パソコンに向かってカタカタしていたり、Webデザイン、クリエイティブデザインをしている人が多い部署だから、割と職人気質の人が多い。なぜかそういう人達は喫煙者が多い気がする。 彼らは屋外にある喫煙所を、タバコを吸いに出かける。それが休憩になっているという。 僕は、と言うと、ここ最近はランチの時間もない。この会社は夜ご飯も食べようと思えば食べられるけど、使ったことがない。 あれ、いつ休憩してるんだろう？ 「ということで、行きますよ！」と、半ば強引に夕飯に誘われた。みんな夕飯後も仕事するから、お酒は特にないし、というか会社内だし。 当たり前
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
雑誌からデザインを学ぼう
2024年4月25日 Webデザイン, インスピレーション みなさん、雑誌読んでいますか？紙の雑誌は手に取らなくなった人も、電子版なら読んでいるという人もいるかもしれませんね。実は私、お試しのつもりがうっかり楽天マガジンの年間購読に課金しちゃったもので、せっかくだからと読み倒している今日このごろ。眺めているとあしらいやレイアウトが自由で見ていて楽しいんですよね。デザインの勉強中の方にもおすすめなので、雑誌を見るポイントや、おすすめ勉強方法を紹介します。 ↑私が10年以上利用している会計ソフト！ デザインの注目ポイント Webデザインを考えているとき、Webサイトだけ見ていてもなんだかアイデアもレイアウトも偏ってしまうことがあるかと思います。そんな時は雑誌を見てみましょう！ レイアウト パラパラとページをめくるだけでも感じられるのが、本当に自由度が高い！サイズやページ数という制限はありつつも
商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ
滅びてほしい認証系の実装の話
こんにちは、富士榮です。 ちょっと前に某所でダメダメな認証系の技術実装ってなんだろうねぇ、、という話をしていたことをXで呟いたところ、色々とご意見を頂けましたのでまとめて書いておきます。 考えていると結局のところ、サービス提供側が意図していることとは全然違うことが起きている気がするので、この辺はしっかり考えて実装したいところですね。（実装ミスは問題外として） カテゴリ滅びてほしいもの実装側がやりたいこと利用者が感じること実際に起きていること代替手法認証CAPTCHAbot避けぐにゃぐにゃ文字が読めない バイクと自転車の違いとは？ユーザの離脱、カゴ落ちパスキーの利用 新しいタイプのCAPTCHA（通常は画面に出ない） リスクベース認証との組み合わせによる抑制認証パスワード誰でも使える認証手段の用意忘れる。複雑なパスワードをそれぞれのサービス毎に管理するのは無理パスワードの使い回し。パスワード
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
group_inou / HAPPENING
Interactive GIF Music Video by AC-bu
企業や事業のブランディングをしようと思っても、どうすれば良いのかわからない方も多いのではないでしょうか。 「ブランディングって漠然としていて、どこから始めればいいのかわからない…」 「自社の強みを活かせる魅力的なブランドを作りたいけれど、どの会社を選べばいいのか迷っている…」 ブランディング会社に依頼することで、事業の根幹でもあるブランディングを制作してくれます。 そこでこの記事では、有名な大手企業をはじめとしたブランディング会社の中から、厳選した8社をご紹介します。 それぞれの会社のサービス内容、費用相場、運営実績、評判などを詳しく比較し、最適な会社を選ぶためのポイントも解説します。 ブランディングで成功するためにも、この記事を読んで、ブランディング会社選びの参考にしてください。 ブランディング会社のおすすめ8選【2024年版】 ブランディングを行っている会社の中から、おすすめを8社まで
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
こんにちは、Design Executive Center UID本部UID2部で部長を務めているイ・ジェフン（ Lee Jehoon ）です。 Webデザインの世界は、常に革新的なトレンドによって変化し続けていますが、それに迅速に適応することは簡単なことではありません。それだけに、新しいデザイントレンドをいち早く取り入れたいものの、何から始めればいいのか迷っているデザイナーは多いはずです。 そこで、この記事では2024年に注目される4つの重要なデザイントレンドをご紹介します。 1.Bento UI （弁当箱グリッドレイアウト）まず最初にご紹介するのは、Bento UI（弁当箱グリッドレイアウト）です。 日本語の「弁当」に端を発するネーミングで、グリッドを"お弁当箱"のように分け、コンテンツをいくつかのセクションごとに配置するデザイン形式のことです。 これにより、Webページを構造化し、さ
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
企業が求めるパソコン使えますとはなんでもできることである - 格安ガジェットブログ
Webデザインコンサルタントを名乗る事業者と当社との関係につきまして
令和のHTML / CSS / JavaScriptの書き方50選
【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう｜ChatGPT研究所
できるクリエイターへの近道、話題の最新Webツール・デザイン素材50選
ひとり会社の起業について学んだ10のこと - GoTheDistance
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
リスキリングとは - u nextで息抜きする組み込みエンジニア
これで翻弄されない！デザインフィードバックを成功に導く６つのヒント｜toto｜Rabee.inc
アイデアを刺激する、みんなの最新Webデザイン36選【2024年4月版】
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
iOSとAndroidの"Divider"の線幅の違いと各社の対応｜鈴木慎吾 / TSUMIKI INC.
WEBサイト「印象をただようアトリエ」リリースしました。 - 印象をただよう告解部屋
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？
好きな404エラーといえばこの企業のエラーページ「日本郵便のお洒落すぎる」「NASAの404もいいぞ」
「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
テキストを1文字ずつアニメーションさせる時の注意点と実装例 ｜ TAKLOG
Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）｜nanami
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
【2024年】ブランディング会社のおすすめ8選！制作依頼したい企業ランキング一覧
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
LINEヤフーのデザインリーダーが語る、2024年Webデザイントレンド｜LINEヤフーDesign 公式note
ワイヤーフレームは“しゃべりながら”つくる｜akane