Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
72ページ / A5サイズ / 電子版はPDF（フルカラー） / 紙の本は表紙カラー、本文モノクロ 技術書典16（2023年5月25日～6月9日）の新刊「読み手につたわる文章 - テクニカルライティング」です。 「PDF版」は名前のとおり、PDFをダウンロードできます。紙の本はついてこないので注意してください。 紙の本が欲しい方は「書籍版＋PDF版」を購入してください。技術書典16の会期中は技術書典オンラインマーケット（送料無料）で購入できます。 https://techbookfest.org/product/3t8AGqtB65jsPtPhx6m5fr 「ダウンロードカード用」は、既に紙の書籍をお持ちの方向けのファイルです。紙の書籍を購入された方は、あとがきの後ろにダウンロード用のパスワードが記載されています。ダウンロード後、あとがきに記載されているパスワードでZIPファイルを解凍して
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
【無料】高精度&爆速で文字起こしが終わるAIツール「Gladia」がスゴイ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、インハウスマーケティング部のかけるです。 生成AIによってライティング業務の効率化が進むなかで、「文字起こし」は生成AIが得意とする領域の一つです。 今回は数ある文字起こしAIのなかでも、実際に使ってみて良かった文字起こしAI「Gladia」について、その使い方や魅力をご紹介します！ 「Gladia」は精度が抜群 https://www.gladia.io/ まず前提として、Gladiaの文字起こしの技術には、OpenAIがオープンソースとして公開している文字起こしAI「Whisper」が活用されています。 Gladiaの大きな魅力は、なんといっても音声から文字を起こす（Speech-to-Text）際の精度の高さです。 一般的に、音声認識の精度は「単語誤り率 （WER）」という、その音声認識モデルが音声をテキストへ変換する際にどれぐらい間違えてしまったのかという評価尺度があり
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員（Webディレクター）として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 QiitaやZennなど、ITエンジニアさん同士での情報共有を目的としたメディア。正直、Webディレクターの私が見ていてもチンプンカンプンな内容が多いのですが、それでも読み物として勉強になるので、よく拝見しています。 読む専門のITエンジニアさんも多いかもしれませんが、個人的には、自身のノウハウは積極的にアウトプットしていくのをオススメします。 「人の役に立つから」「自分の認知を広げられるから」など理由はさまざまですが、一番はシンプルに「自分のスキルとして定
デザインツールとしてのCanva -バナーだけにとどまらない多様な活用法
デザインツールとしてのCanva -バナーだけにとどまらない多様な活用法 Canvaは広告バナーだけでなく、SNS投稿用の動画、チラシなどの印刷物、プレゼン資料、 Webサイトのデザインなど幅広い用途に利用できます。 この記事では、Canvaの幅広い用途について解説します。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 Canvaの概要 Canvaは、デザイン初学者からプロフェッショナルまで幅広いユーザーに対応するオンラインデザインツールです。 デスクトップアプリの他にブラウザでも使うことができ、デバイスを選ばないので、PCで途中まで作業していたものを出先でスマホで引き続き作業も可能です。 Canvaはテンプレート、使用できるフォント、
東京生まれ、神奈川、埼玉育ち、東京在住。Web制作をしたり小さなバーで主に生ビールを出したりしていたが、流れ流れてデイリーポータルZの編集部員に。趣味はEDMとFX。（動画インタビュー） 前の記事：ねえ見て、この豊かな時間 ～デニーズで2000円のパフェを ＞ 個人サイト まばたきをする体 Twitter @eatmorecakes 鳥貴族が喫茶店になる日ががちで来る コーヒーを飲むのだから昼に行きたいと、調べて平日14時にオープンする店舗を見つけた。新宿東口店だ。 一蘭の行列の脇を抜けてビルの8Fにある ざっとの確認ではあるが、おおむねねの鳥貴族は16時～17時くらいの開店だそうだから、この店舗はそれに先駆けてばーんと開けてくれるわけで、ありがたいことだ（なお、週末ともなると12時にオープンする）。 昼に8Fにある店ってあんまり行かないな さて、鳥貴族がコーヒーをラインナップしたのは今年
顧客の目にとまる！ デザイナー直伝「ワンランク上の綺麗な資料」作成のコツ ｜ブログ｜東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
こんにちは、クオートワークスです。 普段、さまざまなシーンで資料を作成する際、デザイン面で以下のように悩むことは多いのではないでしょうか。 「資料が野暮ったい」 「伝わりやすい資料を作りたい」 「資料デザインを洗練させたい」 「上司や顧客を驚かせたい」 デザインは単なる装飾ではなく、情報の伝達に重要な役割を果たします。適切なレイアウトや色彩、フォントを選ぶことは、読み手にとって理解しやすく魅力的な資料を作成する上で欠かせません。 しかし、デザインスキルに自信がない場合や、時間が限られている場合、この課題に取り組むことは容易ではありません。 そこでこの記事では、スライド資料を作成する際のデザインの基礎的なコツのほか、デザインが苦手でもデザイナーの技を簡単に再現でき、ワンランク上の資料を効率的に作成するためのヒントをご紹介します。 作例をたっぷり掲載しているので、ぜひ実践にお役立てください。
ChatGPT-4o vs ChatGPT-4｜特徴や各モデルの違いを解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Technology部のジョシュです。 先月13日にリリースされた「ChatGPT-4o」は、ChatGPT-4の後継モデルとして、前モデルからの性能の向上や、新たに追加された機能に世界中から注目が集まりました。 そこで今回は、「ChatGPT-4o」と前モデルの「ChatGPT-4」の違いを深掘りし、それぞれの機能や性能、そして応用の可能性を詳しく解説します。 「結局、どっちのモデルを使ったら良いの？」「ChatGPT-4oは何ができるようになったの？」など、 ChatGPTの最新情報をキャッチアップしたい方はぜひご覧ください。 ChatGPT-4oの概要 ChatGPT-4oは、OpenAIの最新の生成AIモデルで、より強化された自然言語処理（NLP）機能を備えています。GPT-3.5とGPT-4をベースに、テキスト、音声、画像をリアルタイムでシームレスに統合処理します。
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員（Webディレクター）として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 仕事を上手に進められる人の条件はいろいろあると思います。しかし中でも最重要だと思われるのが「スタートダッシュで60%の完成品を作れる力」だと思います。 これは「スキル」というほど特別なものではなく、誰でも簡単にできる心構えの話。意識を変えるだけで、誰でも実行可能になります。 【目次】 最速で全体像を作る力 なぜ不完全でも最速で仕上げるべきなのか 1.どんな仕事もやり直しになる 2.自分一人で仕事をすることは少ない 3.ハシゴの掛け違いを防ぐため 4.タスクの
せきゆおう｜Web制作のあれこれ発信する人 @wurst_design Webクリエイター｜Web制作のアンケートを取る人｜Voicyパーソナリティ｜Amazonアソシエイト参加中｜Colosoで講座をリリース→2023年上半期プログラミングカテゴリのBEST講座｜Webクリエイター総合オンラインコミュニティ #シナカフェ を共同運営｜業界歴が長めの日本人→デザインもコーディングもする人 linktr.ee/oilking せきゆおう｜Web制作のあれこれ発信する人 @wurst_design デザイナーたるもの、写真素材を探している際に、「なんか筋肉が足りないんだよな」と感じることは多いと思います。 そんなときにオススメな素材サイトが 「マッスルプラス」 すべて著作権フリー！且つ無料でご利用可能！筋肉の部位から検索もでき、筋肉探しに時間がかかる問題も解決！ pic.twitter.com
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
72ページ / A5サイズ / 電子版はPDF（フルカラー） / 紙の本は表紙カラー、本文モノクロ ▼実際に読んだ人の感想はこちら https://togetter.com/li/2376408 ▽株式会社カケハシ 技術広報 櫛井優介さん 仕事で文章を書く全ての人にお勧めしたい優しくて実践的な一冊です。 技術広報の仲間たちにもぜひ読んでほしいので、30冊買って配ってまわりたいと思います。 ▽UXライター otapoさん チームの生産性を向上させるのにも役立つテクニカルライティング。 そのはじめの一歩を踏み出すとき、書き手の背中をやさしく押してくれる1冊です。 --- 突然ですが……私たちは、毎日のようにテキストで誰かに何かを説明したり、説明してもらったりしています。 * Slackで他部署の人に仕様の疑問点をつたえて質問する * 業務でつまづいている部分を日報に書いて上司に報告する * ロ
リサーチ＆まとめを効率化!「Perplexity AI」の使い方を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
インハウスマーケティング部の井上です。 たとえば企画や資料作成など、デスクワークをしているなかで「調べる」「まとめる」という業務はしばしば発生しがちですよね。ときには沼にはまってしまい、「時間が無限に溶けていく……」「本来やるべき業務が手につかない！」といった経験をしたことがある人も多いのではないでしょうか。 こんなときこそ生成AIの力が必要だ！ということで、今回はリサーチやまとめの効率化に役立つ「Perplexity AI」（パープレキシティ）の使い方をご紹介します。 ※本記事の情報は2024年6月4日時点のものです。 Perplexity AIとは？ ▲Perplexity TOPページ ※有料プランの画面です 「Perplexity AI」（以下、Perplexity）は、元GoogleのAI研究者チームによって開発されたAI搭載の対話型検索エンジンです。 最大の特徴は、検索をベース
株式会社スゴヨクがGoogle Partnerとして認定されました。デジタルマーケティングの未来へ、共に歩む。 株式会社スゴヨク（本社：福岡県福岡市、代表取締役：重富 翼、以下「スゴヨク」）は、この度、Google Partnerに認定されましたことをお知らせいたします。 今回の認定により、スゴヨクはGoogle広告に関する専門知識と実績を公式な認定を受けました。 Google Partnerプログラムは、Googleの広告製品に関する専門的な知識、スキル、および優れたパフォーマンスを有する企業に与えられる認定プログラムです。 この認定を受けることで、スゴヨクは最新のGoogle広告技術やトレーニングにアクセスし、クライアントに対して最先端のデジタルマーケティング戦略を提供できるようになります。 [Google Partnerの条件・運用の実績] ・Google広告キャンペーンの最適化スコ
はじめてのアプリUIデザイン。フローやWebサイトとの違いを解説します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ 最近Webサイト制作だけではなく、アプリ開発にも携わることが増えてきました。 その中で「Webサイト制作に似ているな〜」と思ったり、「あれ、ここは違う！」といった気づきがたくさんありました。前職ではソーシャルゲームのUIデザインを担当していましたが、Web業界に転職したときも、まったく同じことを思ったのを覚えています。 今回は、Webデザイナーの方がはじめて「アプリのUIデザイン」をするときに必要な知識や考え方、意識したほうがよいことを、フェーズごとにまとめてみました。 アプリにおけるUIデザインとは そもそも「UI」とは、ユーザーインターフェース（User Interface）の略で、日本語では「ユーザーとの接点・接触⾯」という意味になります。 UIはユーザーの目に触れ使用する部分すべてを指し、このUIを通してコンピューターとユーザーは情報のやりと
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員（Webディレクター）として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 複数人のメンバーが関わるプロジェクトでは、取りまとめをする人が必要です。 そうでなければ、メンバー間のコミュニケーション不足により連携ができなくなったり、タスクを譲り合って宙ぶらりんの状態になったりと、プロジェクトが円滑に回らなくなってしまいます。 そんな役を担っているのが「Webディレクター」です。ディレクターの態度・行動次第で、プロジェクトがスムーズに進むかはもちろん、メンバーの士気や空気感も変わってきます。 そこで今回は、12年間のWebディレクター業
河原でバウムクーヘン作り（デジタルリマスター）
東京生まれ、神奈川、埼玉育ち、東京在住。Web制作をしたり小さなバーで主に生ビールを出したりしていたが、流れ流れてデイリーポータルZの編集部員に。趣味はEDMとFX。（動画インタビュー） 前の記事：無さそうで無かった！鳥貴族にコーヒーが出た ～ホットもアイスもある～ ＞ 個人サイト まばたきをする体 Twitter @eatmorecakes バウムクーヘンの真実 なんであんな形なんだろうとは前々から思っていた。真ん中に穴があいてるのも、薄い層が重なってるのもよくわからない。 そもそもどうやって作るんだろう？ なぜこの形状 ネットで検索してみたところ、出るわ出るわバウムクーヘンの製作風景。そしてそのどれもが野外活動の記録だった。バーベキューとか、キャンプファイヤーのついでにバウムクーヘンが焼かれている！ てっきり貴族のティータイムにぴったり的なお菓子だとばかり思っていたが、そんなワイルドな
株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「課題解決力」UPのために、日頃意識している事について書いてみました。 ビジネスパートナーとしての心構えこれまで、WEB制作やマーケティング支援を通じて、課題解決に取り組んできました。しかし、クライアントの中には、WEBサイトの作成やSNSアカウントの設立が目的化してしまうことがあります。 そのような場合、課題を整理し、本当に実現したいことを一緒に探り、具体的な提案に落とし込むことが重要です。単なるデザイナーの枠にとらわれることなく、ビジネスパートナーとして全体を俯瞰し、信頼と成果を得るために、日頃から課題解決力を鍛えることを心がけています。 今回は、課題解決力を高めるために、普段から意識している考え方をnoteにまとめました。 そ
マイクロソフトが提供する無料で使えるヒートマップ「Microsoft Clarity」を使ってみよう！ Webサイト／Webアプリを制作・運営する上で、非常に役立つヒートマップですが、その多くは有料で提供されているサービスです。中には無料プランを提供するサービスもありますが、機能が限定されているお試しプラン的なものが多く本格的な分析には向きません。無料で使えるヒートマップを探しているWeb担当者、Web制作関連の方も多いと思いますが、なかなか良いものが見つからないのが現状ではないでしょうか。 そこで、今回はMicrosoft社が無料で提供するMicrosoft Clarity（マイクロソフト クラリティ）というヒートマップ・分析ツールについて、基本的な使い方や活用法を詳しく解説します。 Microsoft Clarityの概要▶︎Microsoft Clarityとは Microsoft
UI/UXデザイナーがなくなるといわれる理由や将来性をプロが解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Webデザインスクール「デジLIG」でクリエイターを目指す受講生のメンターや転職サポートを行っている久保です。 デザイナーのなかでも高度なスキル・考え方が求められるUI/UXデザイナーという職業について、「今後なくなる？」と噂されている背景とその真意についてまとめてみました。 本記事では、プロの目線でUI/UXデザイナーの仕事が本当になくなるのか解説していますので、ぜひ最後まで読んでみてください。 最近、「UI/UXデザイナーは将来なくなってしまう」ということがいわれています。 はじめに断言しておきますと、答えは「NO」です。 ではなぜ高度なスキル・考え方が求められるUI/UXデザイナーという職業がなくなるといわれているのでしょうか。理由は大きく2つあります。 AI技術の発展 理由の一つ目はAIなど革新的な技術進歩により「自動で簡易的にデザインが作られるようになる＝人の考えたデ
フロントエンドエンジニアの転職の参考になるポートフォリオ制作事例3選 | 転職ポートフォリオの作り方を学ぶならアームズ
転職活動に備えて、いざ転職ポートフォリオを作ろうにも周りに相談できる人がおらず困っているという方も多いはず。 かといって、他人のポートフォリオを見れる機会なんてほとんどなく、同業者の事例を参考にしようにも、そもそも探し方が分からないなんてこともあるでしょう。 そこで、今回は「フロントエンドエンジニアの転職の参考になるポートフォリオ制作事例3選」について解説します。 もしフロントエンドエンジニアでの転職を考えているけど、ポートフォリオの作り方に悩んでいるという方は、ぜひ参考にしてみてください。 転職市場でのフロントエンドエンジニアの需要について 求人ボックスによると、2024年6月時点で掲載されている正社員のエンジニアの求人数は778,442件。 中でも、正社員のフロントエンドエンジニアの求人数は43,487件と、エンジニアの全体求人数から比較すると約5.6%ほど。 未経験の求人は23,30
【初心者でも簡単】画像生成AI「Adobe Firefly」の使い方を丁寧に解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ インハウスマーケティング部のりこぴんです。 最近、さまざまな画像生成AIツールが話題になっていますよね。 今回は、IllustratorやPhotoshopなどAdobeツールとの連携が充実していて、経験やスキルを問わず誰でも簡単に画像生成ができる「Adobe Firefly」についてご紹介いたします。 画像生成AIをまったく触ったことがない方でもわかるように、Adobe Fireflyの始め方から使い方、また使用する際のコツを丁寧に解説いたします。ぜひ最後までご覧ください！ Adobe Fireflyってなに？ Adobe Fireflyとは Adobe Fireflyとは、Adobe社が提供する画像生成AIツールです。テキストを入力するだけで、誰でも簡単にクリエイティブな画像を生成することができます。 Adobeといえば、PhotoshopやIllustratorなどの画
私は読書が苦手でした。今でも得意というほどではありませんが、苦手意識はなくなりました。その要因は、「読書とはこうあるべき」という固定概念を拭い去ったからです。 今回は、私が実践している読書法についてご紹介します。「本を読むのが苦手」という方の苦手意識を少しでも和らげられたら幸いです。 【目次】 読書嫌いな私でも本が読めた3つの非常識 非常識1.途中でやめてもいい 非常識2.1ページ目から読まなくていい 非常識3.ネタバレしてもいい 本を読む前の準備と順番 準備1.本から何を得たいかを考える 準備2.目次を見る 準備3.興味のあるところから読み始める さいごに ＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員（Webディレクター）として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私
コラム33：Webディレクターがよく使う便利ツール5選 | オンラインコミュニティ「集まれ！Webディレクターの森」
こんにちは！Webディレクター1年目のつちだです。 突然ですが、皆さんはWeb制作のお仕事をする上で、「これが無いと仕事にならん！」というツールはありますか？ 私はFigmaなどのデザインツールやChat GPTなどのAIツールはもちろんのこと、「ツールサイト」や「Google拡張機能」などもよく使っていて、「これが無くなったら困る！」と思うことが多々あります。 そんなわけで、今日は『Webディレクターがよく使う便利ツール』を5個紹介します！ つちだ 【つちだのプロフィール】 業界未経験で去年の5月にWebディレクターへ転職。 アニメ・ゲーム系のWebサイト制作会社に勤めています。 XやYoutubeで、新しいツールやガジェットのレビューを見るのが地味に好き。 Alt & Meta viewer https://chromewebstore.google.com/detail/jjcjbl
Webデザインに必須のコーディングの基礎知識【初心者向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デジタルエデュケーション部の田中天（@10TEN10TAN10）です。現在、私はデジタルハリウッドSTUDIO by LIG（通称：デジLIG）の運営を担当しています。 みなさん「コーディング」ってどんなイメージを持っていますか？ Web制作に必要なもの？ ずらずらと英語や数字が並んでいるもの？ なんだか難しそうなコーディングですが、コーディングを行いWebサイトに動きを付けることで、ユーザーを楽しませてサイトの滞在時間を伸ばすことができたり、リピート率を高くしたりもすることができます。 本記事では、そもそもコーディングとはなにをすることなのか、どんなときに必要になるのか、そして学ぶことのメリットをご紹介します。この記事を通して少しでもコーディングと仲良くなれればと思っています。 Webデザインのコーディングとは？ 必要なの？ Web制作において、見た目のデザインだけをしても、
UIデザイン改善！Googleに学ぶマテリアルデザインのエレベーション(奥行き)活用法 ｜ブログ｜東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
こんにちは。UIデザインのプロフェッショナルとして、長年マテリアルデザインを研究してきた私が、今回はエレベーション（奥行き）の重要性と活用方法について、詳しく解説したいと思います。 マテリアルデザインは、Googleが提唱するUIデザインの体系であり、現実世界の物理法則を取り入れることで直感的で美しいデザインを実現しています。その中でも特に重要な概念が「エレベーション（奥行き）」です。エレベーション（奥行き）を適切に活用することで、ユーザーの直感的な理解を助け、UIの構造や階層を明確に伝えることができます。 本記事では、エレベーション（奥行き）の基本的な考え方から、実践的な使い方まで幅広く解説していきます。デザイナーの方はもちろん、クライアントの方やディレクターの方にも、エレベーション（奥行き）の重要性を理解していただき、より洗練されたUIデザインを目指すための知識を提供できればと思います
2024年5月16日 AI, Photoshop デザイナーのみなさん、話題のAIは使いこなせているでしょうか？興味はあるけど何から始めればいいかわからない、試してみたけど結局うまく使えない、なんて声も聞こえてきます。今回はPhotoshopの生成AI機能（Adobe Firefly）のうち、手軽に試せる、かつ汎用性の高い使い方を紹介します！ ↑私が10年以上利用している会計ソフト！ 足りない部分を補完 私が最初に使い始めて便利だなー！と実感したのがこの機能。正方形の画像を横長に表示したいとき、左右の背景が足りずに困った事がある人も多いのではないでしょうか？そんなときは生成AIを使いましょう！ まずは画像を用意し、Photoshopで開きます。そして実際にしようしたいサイズで切り取りましょう。この例だと左右に余白ができてしまっています。 この余白部分を選択して、画像の下部に表示されている「
今回読んだ本 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選
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
読み手につたわる文章 - テクニカルライティング - mochikoAsTech - BOOTH
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
テックブログ執筆に役立つ心構え - paiza times
無さそうで無かった！鳥貴族にコーヒーが出た ～ホットもアイスもある～
仕事がデキる人／デキない人、決定的な差 - paiza times
“なんか筋肉が足りないんだよな” と感じた時に筋肉の部位からも検索可能な素材サイトがこちら「大爆笑してる(笑)」
Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
読み手につたわる文章 - テクニカルライティング：mochikoAsTech
株式会社スゴヨクがGoogle Partnerとして認定されました。
プロジェクト管理で失敗する社員の共通点 - paiza times
Webデザイナーが実践する「課題解決力」UPのヒント！｜toto｜Rabee.inc
マイクロソフトが提供する無料で使えるヒートマップ「Microsoft Clarity」を使ってみよう！
読書を諦めた人への、頑張らない読書法 - paiza times
まずはここから！Photoshopの生成AI機能を試してみよう！
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita