【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
インド在住のライター兼エンジニアのニティン・シャルマ（Nitin Sharma）氏（詳細は同氏LinkedInプロフィールページを参照）がMediumに投稿した記事『GPT-4oはクレイジーだ―思わず言葉を失うような（信じられない）6つの使用例を紹介』では、GPT-4oの実用的な使用例が紹介されています。 シャルマ氏が紹介するGPT-4oの使用例は、以下の表の通りです。 GPT-4oの6つの実用的な使用例
Tailwind CSS初心者が絶対ハマる落とし穴
ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
ユーザーの声を大切にする すべての組織のために。 toitta（トイッタ）は、デザインリサーチ・マーケティングリサーチに携わるチームのために考案された、インタビュー後の発話分析を支援するソリューションです。 リサーチを通してインサイトの発見・仮説の精緻化を実現するまでのプロセスにひそむ課題を、「生成AIを活用した発話の構造データ化」で解決します。 インタビューの録画・音声データをAIで処理し、データを分析しやすい形に整えることで、ハードルの高いインタビュー分析を強力にサポートします。
先月からXにCSSテクニックを定期的に投稿しているので、それのまとめです。 テキストの中央寄せだからといって text-align:center を指定したほうが良いかは考えたほうがいい ポストを別枠で表示する 和文をtext-align:centerで中央寄せすると複数行になった際に見栄えが悪くなるケースが多いです。 inline-size:fit-contentとmargin-inline:autoでセンタリングすることで、1行の場合は中央寄せ、複数行の場合は左寄せといった実装が可能となります。
Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ビューポート内のコンテンツの幅を制限する 2. テキストのサイズを大きくする 3. 行間のスペースを広げる 4. 画像のサイズを制限する 5. コンテンツ内のテキストの幅を制限する 6. 見出しをよりバランスよくする 7. ページスタイルに合わせたフォームのカラー 8. テーブルの表を分かりやすくする 9. テーブルのセルとヘッダのスペース 10. アニメーションと動
本記事は Design Week 2023 1日目の記事です。 🌈 告知記事 ▶▶ 本記事 ▶▶ 2日目 💐 こんにちは、Webデザイナー3年目の馬場です。 突然ですが、 「メンフィス」「グラスモーフィズム」「アイソメトリック」... 皆さんはこれらのワード、いくつ知ってますか？ もしくはデザイナーの方は、 「このデザイン、最近良く見るけど呼び名とかあるのかな…？」 「他人に言葉で『◯◯のデザイン』と説明したいけど名前がわからない...。」 と思ったことはありませんか？ 私は定期的にWebデザインのトレンドや用語などを調べてインプットしているのですが、 今までよく目にしていたデザインスタイルや模様などに「こんな名前があったんだ」と、恥ずかしながら初めて知ることが多々あります。 今回はそういったデザインスタイルの呼び名を集めましたので、参考サイトや使用事例と共にご紹介していきます。 メン
デザイナーも身につけておきたい意図を引き出す質問の秘訣
質問の仕方で変わることがあるデザイナーにとって、プロダクトマネージャーやエンジニアとの効果的なコミュニケーションは、良いデジタルプロダクトを生み出すために欠かせません。ドキュメントや打ち合わせを通して施策への理解を深めていきますが、情報のインプットだけでは分からないことがあります。そこで、意図を明らかにするために質問をするわけですが、ただ「なぜですか？」と尋ねても望む返答が得られない場合があります。では、どのように質問すれば良いのでしょうか。 私自身、まだ完全にできているわけではありませんが、質問するときの秘訣がいくつかあります。 相手の見解に興味を示す良い質問をするために最も重要なのは、純粋な好奇心です。プロダクトマネージャーやエンジニアの見解に興味を持ち、もっと知りたいと思う気持ちが、良い質問を生み出します。抽象的に聞こえるかもしれませんが、形式的な質問を覚えるより、ずっと効果的です。
Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割を調べて実装してみた - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割 リトライ サーキットブレーカー レートリミット レートリミット、サーキットブレーカー、リトライの実装 サンプルアプリケーションの実装 リトライ、サーキットブレーカー、レートリミットを追加 まとめ 年に1度の技術イベント「RAKUS Tech Conference」を開催します！！ はじめに こんにちは！エンジニア２年目のTKDSです。 今回は、レートリミット・サーキットブレーカー・リトライについて調べた内容を紹介し、ライブラリを使ってGoで実装してみます。 Webアプリケーションにおけるレートリミット、サーキットブレーカー、リトライの役割 リトライ リクエストが失敗した場合に再試行します。 リトライは、一時的な障害に対して効果を発揮します。 ネットワークの瞬断やサービスの一時的な過負荷など、やり直
これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
目次[非表示] 1.はじめに 2.なぜPHPバージョンアップが必要なのか？ 3.PHPバージョンアップ手順 3.0.1.PHP 7.4とPHP 8.3の変更差分調査 3.0.2.Laravelのバージョンアップ（7.3から10へ）の調査 3.0.3.Composerライブラリのバージョンアップ 3.0.4.PHP 8のローカル環境設定を更新する 3.0.5.静的解析の実施 3.0.6.テスト仕様書の作成 3.0.7.エラーの修正 3.0.8.テスト環境へのデプロイ 3.0.9.デバッグ 3.0.10.本番環境へのデプロイ 4.静的解析ツールの活用 4.0.1.PHPStanを使用した理由 4.1.ルールレベルの設定 4.1.1.使用した感触 5.まとめ 6.お悩みご相談ください はじめにこんにちは、株式会社DIVXでエンジニアを務めております、本間と申します。 今回は、PHPのバージョンを
生成AIでコーディング効率化！→待っていたのは“失敗の日々” とあるITエンジニアとAIの試行錯誤の記録（1/3 ページ） 「生成AIに振り回された3カ月間の成功と失敗」──コンサルティング事業などを手掛けるリンクアンドモチベーションは6月29日、エンジニア向けの転職サービス「Findy」を運営するファインディ（東京都品川区）が開催したイベント「開発生産性Conference 2024」で、こんな講演を行った。登壇したのはソフトウェアエンジニアである山西陽平さん。開発生産性を上げるため、生成AIでコードを編集するために試行錯誤した3カ月間の体験談を話した。 山西さんが作ったのは「GitHubのIssueを基に、AIがPull Request（PR）を作成してくれるツール」だ。米OpenAIの大規模言語モデル「GPT-4」を活用し作成したツールで、これで型注釈を付けるタスクの自動化を試みた。
なぜWebサイト制作は失敗しやすいのか？巨大プロジェクトから学ぶ成功の鍵とは | [マーケターコラム] Half Empty? Half Full?
みなさん、こんにちは。瀬川義人（@motoy0shi）です。 突然ですが、みなさんはWebサイト制作で「こんなはずじゃなかったのに……」という経験はありませんか？ お恥ずかしい話、私はあります。 かつて自社のWebサイト制作に関わったときのことです。制作のプロジェクトマネージャーとして入ったのですが、始まって早々、別の急ぎ案件が入ってしまい、なかなか時間が捻出できず、プロジェクトが停滞。さらにいざ再開してからも、思わぬトラブルに巻き込まれてしまいます。 結果的には納期が数ヵ月遅延し、工数もかなり超過してしまいました。思い出すと、今でも苦い気持ちになります。 データを調べてみると、Webサイト制作での失敗は意外と多いようです。ナノカラー社の調査によれば、71.7%の回答者がWeb制作会社に依頼して”失敗した”と感じた経験があるそうです。 なぜWebサイト制作は失敗するのでしょうか？ リスクを
![なぜWebサイト制作は失敗しやすいのか？巨大プロジェクトから学ぶ成功の鍵とは | [マーケターコラム] Half Empty? Half Full?](https://cdn-ak-scissors.b.st-hatena.com/image/square/d23cf81b7a6487d6a77c8e0118638b3c45b8cf13/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2017%2Fhehf%2F2024%2Fhehf124_segawa_ogp.png%3Fitok%3D538XqiVb)
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ LIQUID BLOOM New ブロックテーマ フルサイト編集 スタイル対応 おしゃれな店舗/美容室/観光サイト向け ブロックテーマ デモ ダウンロード 安心継続サポートプラン <$mt:Include module="お知らせ"$> <$mt:Include module="テーマの特長（ブロック）"$> ブロックテーマとは ブロックテーマは、ヘッダー、コンテンツ、フッターなど、サイトのあらゆる要素を編集できる WordPressの最新機能フルサイト編集（FSE）に対応したブロックベースのテーマです。 フルサイト編集機能を利用するためには、ブロックテーマが必須です。 ノーコードで 自由自在に こだわり編集 デザインに迷わない フラットな要素を取り入れた、シンプルで分かりやすいデザイン。 余白を多く設けることで、心地の良い雰
広島県尾道市にあるしまなみブルワリーの公式ブランドサイトです。王道のラガースタイルのど真ん中を突き詰めた「ストライピルスナー」をはじめ、１杯目専用のラガー「ファーストラガー」や季節のフルーツを用いたデザートビール「しまなみキャット」などしまなみ海道をのぞむ尾道から個性豊かな商品を展開しています。
Webクリエイティブの 学園祭 4年ぶり13回目の開催となるdotFes。今年の舞台は東京です。 コロナ禍を経て、私たちは過去に直面したことのないさまざまな出来事に向き合いました。 クリエィティブ業界も大きく変化を遂げ、今求められているクリエィティブ・テクノロジーとはどのようなことなのか、 来場者の皆さんと一緒に楽しみ、考え、交流できるイベントにしていきたいと考えています。 今回も各界隈で活躍されている方々をお招きし、トーク、展示、ワークショップを通しクリエイティブな1日をお届けします。 過去のdotFes一覧はこちら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
米政府系サイトの常識を変えた「デザインシステム」革命
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
GPT-4oはクレイジーだ―思わず言葉を失うような（信じられない）6つの使用例を紹介 | AI専門ニュースメディア AINOW
FigmaがAIでさらに進化！ Web制作はもはや完全自動化目前？ 「Config APAC 2024」現地レポ | 進化が止まらない！ 最新ツール
toitta（トイッタ） - ユーザーの声に向き合える発話分析ソリューション
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック
こんな名前があったとは！ デザインスタイルの呼び名まとめ - NRIネットコムBlog
ステップバイステップで学ぶ初めてのPHPアップデート | 株式会社divx（ディブエックス）
生成AIでコーディング効率化！→待っていたのは“失敗の日々” とあるITエンジニアとAIの試行錯誤の記録
カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だった｜よつくら
おしゃれな店舗/美容室/観光サイト向けWordPressテーマ | LIQUID PRESS
しまなみブルワリー公式ブランドサイト
dotFes2024 TOKYO TSUKIJI | Webクリエイティブの学園祭