Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
本稿は当初チーム開発時のメンバー向けにまとめたものです。 ある程度、端折っていた背景などを記載しました。 git初心者同士でのチーム開発において、git操作を詳しく知らないメンバーも含め安全に行う必要がありました。しかし、開発期間はごくわずか...この状況を回避するために、下記の対応をとりました。 Gitコマンドの基礎的な内容を理解する（私） 各種操作をGUI上で完結させる拡張機能を色々と導入する シンプルな開発フロー(Github flow)を採用し、コマンド実行に相当する操作を限定する 各操作をGUI上での操作に置き換え、チームメンバーに教える 本稿はその際の、コマンドやGUI操作に関するメモをまとめたものになります。 こういった取り組みのおかげか、チームの開発をすんなりフローに乗せることができました。 ■ 前提条件 対象とする動き Github flowを回すうえで、 cloneする
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
Our world-class embeddings for search, RAG, agent systems.
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
これは便利！ 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のデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語 杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。 Perlの好きなところ、今後サポートしてほしいところ （スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかん
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか
www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ
現代では、ビジネスを行う企業や個人事業主にとってホームページは必須の存在です。 中でも、使いやすく拡張性の高いWordPressは多くの方から選ばれています。 しかし、数多くのWordPressを使ったホームページ制作会社が存在する中で、自社に最適な業者を見つけるのは容易ではありません。 そこで今回は、Webサイト制作の専門家がWordPressのホームページ制作会社の中から、おすすめの制作会社を8社まで厳選してご紹介します。 それぞれの会社のサービス内容、料金相場、運営実績、評判などの基準を総合的に判断し、厳選した会社のみをご紹介。 WordPressを使ったホームページ制作の依頼を検討している方は、ぜひこの記事を参考にしてください。 WordPressのホームページ制作会社8選【2024年版】 WordPressのホームページ制作を行っている会社の中から、おすすめの制作会社を8社まで厳
はじめまして。 株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日はデザインフィードバックを成功に導くための６つのヒントについてお伝えします！ お時間の無い方は「チェックリスト」だけでもサクッと目を通してみてください✅ デザイナーの皆さま。 クライアントのフィードバックを受ける際、どのような準備をしていますか？ 恥ずかしながら、私がデザイナー駆け出しの頃は「フィードバックを受ける準備」を怠っていました。 その結果、大規模な修正やスケジュールの圧迫、フィードバック通りにやったのに満足度が上がらず、 最後には方向性を見失う事態に。 まさに「こんなはずじゃなかった！！」という状況でした。 このような状況は事前の準備や心構えで軽減できます。 時間に追われながら身を削って修正をしたあの日を繰り
自然言語でWebサイトを作れる「Create」 KEITO（以下、KEITO）：はい。次は、今ものすごく話題になってる「Create」です。 池田朋弘氏（以下、池田）：知らないです。 KEITO：ご存じないですか。この1週間でめちゃくちゃ話題のサービスになっていて、自然言語でWebサイトを作れるものなんですけど。ChatGPTでもコードを吐き出したりできるので、Webの形を作るのはなんとなくできそうだとは思うんですけど。Createだと、その作ったWebサイトに機能を入れることができるんですよね。 具体的に言うと、この右側が、僕が作ったやつです。「KEITOチャットAI」と言って、「こんにちは」と送れば、裏側でChatGPTが動作してしっかりと返してくれる。このチャットボットを、本当に30分ぐらいで作りましたね。しかも僕、プログラミングなんて一切できないので。本当に自然言語だけで「チャット
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下
本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます！ 最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。 デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。 Create.xyzで出来ることCreateを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。 プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。 基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください！⬇️ と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあ
カード型コンポーネントの実装例 ｜ TAKLOG
このブログの記事一覧のアップデートを行ったので、それを踏まえたカード型コンポーネントの実装メモです。次の実装例の解説をしながらカード型コンポーネントの実装時のポイントを説明していきます。 例に漏れず初学者の方は置いてきぼりの内容になってしまっていることと、個人的な見解が多く含まれる俺流な内容であることはご了承ください。 カード型コンポーネントの実装例
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
表記揺れ検出ツール「テキストゆれないくん」 - inzkyk.xyz
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
Git不慣れ勢を束ねて安全なチーム開発をするメモ - Qiita
VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
Reader API
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
「説明サイトとリファレンスサイトの両立を目指したい」 「とほほのWWW入門」管理者・杜甫々氏が執筆時に気をつけていること
ページに抑揚をつける「背景切り替え」のデザインアイデア｜nanami
静的ウェブサイト作成ガイドは個人サイト再興に資するか - YAMDAS現更新履歴
WordPressのホームページ制作が得意な会社8選！おすすめのWebサイト作成会社【2024年】
これで翻弄されない！デザインフィードバックを成功に導く６つのヒント｜toto｜Rabee.inc
プロに依頼するほどでもない画像加工を自分でこなすには？ 「AIを使って画像をどうにかきれいにしたい」人を救う、実務で使えるツール
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
主題と副題のマークアップにはhgroupを使用する – TAKLOG
iOSとAndroidの"Divider"の線幅の違いと各社の対応｜鈴木慎吾 / TSUMIKI INC.
【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう｜ChatGPT研究所
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita