俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
こんにちは。 いつも通りのパーマをかけたらトイプードルみたいになった、どうも柴田です。 さてさて、昨年の11月26日に技術評論社さんより「武器になるHTML」というHTMLだけに特化した初学者向けの書籍を出版させて頂きました。 この記事を読んで下さっている方の中にも、すでに本書をお持ちの方もいらっしゃるかもしれませんね。 ご購入頂きありがとうございます！ ひょっとしたら、もう読み終えられた方もいらっしゃるかもですね。 ということで、本書が発売されて半年近く経ちますが、今更ながら、この本をどういう想いで書いて、どんな方に読んで頂きたいのかについて書いてみたいと思います。 目次 初学者の方に向けたHTMLだけの424ページ「とりあえずこう書いておきましょう」は、ありません一人でも多くの人が利用できるWebサイトを構築するために学校やスクールの先生が教科書としても使いやすいように中級者になっても
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色
「デザイナーだけがデザインをする時代は古い」「デザインにセンスはない」と語るのは、Udemyの「UI/UXの改善を進めるための基礎講座」などで人気を誇る、UI/UXデザイナーの濱野将氏。生成AI時代において、デザインをビジネスをつなげるためのポイントや、UI/UXの基礎を解説します。 UI/UXデザイナーが教えるデザインの基本 濱野将氏：それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせてい
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな
YouTubeでプログラミングの勉強法を解説するエンジニアに注意｜実務未経験からWEBエンジニアへの道のり
「WEB制作の仕事は稼げる」、「3ヶ月で5万稼ぐのは余裕」と言ったりYouTubeで毎日の様に情報発信をする20代のエンジニアがいます。 中には毎日ブログを更新したり色んな職種の仕事をする人もいます。 大学生位の年齢の人が「余裕で稼げる」みたいな言葉を見ると何にも考えてない人は安易に信じますが「楽に稼げる」は絶対に間違いです。 Twitterで↓を見つけましたが私も同感です。 Webライターと並行してランサーズでコーディングやLPの案件取れないかとちょいちょいチェックしてるんだけど、やっぱり競争が激しすぎる。 今日見たLPの案件は50件以上の提案があった。 まだライターの方が恵まれてる。 インフルエンサーに感化されてWeb制作で稼げるようになった人っているのかな？ — Samurai｜Webライター@インドで立ち往生 (@internetkasegu) September 13, 2020
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
大塚流フロントエンド開発の歩き方
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。 フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認する プロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
2021年12月27日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↑私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コ
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由｜seya
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由 こんにちは。Figma 大好きフロントエンドエンジニア、seya と申します。 最近大きくシェアを伸ばしている Figma ですが、デザインが Figma で作られていると Illustrator (以下イラレ)や Photoshop などと比較してかなり実装しやすいと言う実感があります。個人的には後者のツール群はグラフィックのデザインツールであって Web のデザインツールとしては適していないと考えています。 なので、この記事ではフロントエンドエンジニア目線で Figma の何が嬉しいのかを語っていきます。 また、若干片方の群を落とすような主題で予防線はるのアレなのですが、イラレなどをデザインカンプとして実装に取り組んだ経験が3サイトくらいしか
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
実装者が作業前にデザイナーへ確認しておくとよいこと
TAK(@tak_dcxi)です。 コーダーやフロントエンドエンジニア（以下実装者と呼ぶ）が作業に取り掛かる前に事前にデザイナーに確認しておくとよいことを独断と偏見でまとめました。過去に面倒臭がって聞くのを放棄して失敗した経験もあるので、自戒の念も込めています。 デザインの共通ルールを確認する 余白のサイズやフォントサイズや使用している色などはルール決めがされているとは思いますが、デザインのルールを実装時に分かりやすくしておくことで効率的かつ保守性や拡張性に強いコードが書きやすくなります。 逆に実装時にルールが分からないと、実装者がデザインカンプを見てもそのルールを理解するのに時間がかかってしまうことも多いです。余白であれば感覚で配置されてるのか、似たような箇所で17pxであったり23pxであったり…と意図が分かりかねる場合もあります。余白は原則8の倍数で行うみたいなルールが事前に実装者に
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！ 興味があればご覧ください。 はじめに 今回は「web制作案件」というテーマに対して、 僕が良く遭遇する「あるある」と「対策記事」をセットでまとめました。 フリーランスになりたての方や、これからフリーランスを目指す方は是非参考しにして下さい。 制作準備 「初めてのクライアントさんからの案件だな」 デキる人に見えるズルい仕事テクニック 初めてのクライアントさんの時はいつも以上に本気を出すために、一旦この記事を読みます。 仕事が円滑に進むようなテクニックが誰でも実践できる形で書いてあるので、最高です。 毎回はじめに意識するだけで、ちゃんとした人に近づいている気がして気分が良いです笑 「見積もり額
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより
諸事情で締め切りまでに歌詞を考えないといけないのですが、全く思いつかないので、表題の駄文を書き始めてしまいました。 とある IT の事業会社でインハウスデザイナーのマネージャー、エンジニアのマネージャーをそれぞれ短い期間ですが数年経験した身として、ふとした場でこの話が聞こえてくることもあるので、考えをまとめてみました。あくまで IT 系のデザインの話ですのでご注意ください。 デザイナーや、デザイナーに関わる誰かの参考になりましたらと思います。 UI や Web に関わるデザイナーはコードを書くべきかまず、これをデザイナーに言えるのは以下のパターンです。 社長、経営者（給料を出す人）そのデザイナーのマネージャーや、先輩デザイナー（キャリアを導く人）そのデザイナーが入るプロジェクトマネージャー・エンジニアの「お願い」（猫の手を借りたい人）「一般論として『デザイナーはコードを書くべき』とは言えな
🍃はじめに 「これからのWebコーディングのスキルは、はじめからJamstack志向でも良いのではないか？」 と考えたことが本記事執筆の理由です。 先日エビスコムさまから作って学ぶNext.js/React Webサイト構築が発刊され、これであれば普段Webコーディングを専門にされている方がJamstackに入門できると考えました。 一方でJamstackに関連する資料は中上級者向けのものが多く、初学者向けの体系だった資料がありません。 この課題を解決すべく作って学ぶNext.js/React Webサイト構築を目標に掲げ、それまでの道を整備したいと思い本記事を書くに至りました。 🙋対象 これからフロントエンド(Jamstack)を勉強される方 コーディングの基礎を整理したい初中級者 Macユーザー(Windowsでも可能ですが適宜読替えが発生する可能性があります) 🏁ゴール 作って
この記事の内容 この記事は、2019年7月19日に開催した「Affinity User Group JAPANミーティング」というイベントで私がお話しした内容をまとめた記事です。 以前話題になった PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売 という記事の続編のような内容です。 主に以下の内容について書いています。 Affinity PublisherによってWebデザインのワークフローがどのように改善するのか「Affinityは軽い」と言われるが、軽いと何が良いのかおすすめの環境設定脱Adobeへの第一歩 動画で観たい方は以下の動画をどうぞ。音声あり、約24分です。 ※他の登壇者の方の内容は、後日別の記事として投稿予定です。 Affinityが目指しているもの あくまでも私の個人的な私見ですが、AffinityはA
この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう？突然ですが、デザイナーのみなさんUIデザインしてますか？ してます？ では、UIデザインってなにをデザインすることなのでしょうか？ UIデザインってなんなのでしょう？ 私は何もわかりません。デザイン、何もわからない… 私はこの1年上記のような「UIデザインとはなにを作っていることなのか？」ということばかり考えていた気がします。（そして、気づいたら年末になっていました…）。 結論から言うと、UIデザインとはデータベースやサーバーサイドで実装された構造とフロント側での視覚的な情報構造との対称性を設計することであるという考えに至っています。 この実装の
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 独学でフロントエンドエンジニアを目指している人へ フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！ 興味ある方は是非ご覧ください。 はじめに 記事の内容はタイトル通りです！ 年明けから個人で3つほどLPやweb制作系の案件に関わりました。 主にデザインカンプからコーディングする！的な内容ですが、それらを進める中で先輩やデザイナーの方から貰ったフィードバックを重要度で区切ってまとめて見ました。 重要度は個人の主観で決めてます。 Lv3~Lv1で数字が大きいほど重要度が高いです！ 割と初歩的な部分もフィードバック多いので、公開する事への恥かしさもありますが、自分の成長記録的な意義で赤裸々に記しているので、お付き合いください。 Lv3 実案件なら必須 reset.cssいれる rese
0から1にする技術を集合知教えてくれ（追記した）
最近デザインをやることになってしまって、取り付く島がないので本を何冊か買ってみたんだけど、 殆どが、「ノートにラフを書いてみましょう！」「デザインのワイヤーフレーム（デザインカンプ）つくりましょう」という流れをしているものが多かった。 Webデザインの本もHTMLからはじまるコーディングについてだけは割と手厚くて、それより前のことについては「書いてみよう」という流れが多くて、 なんとなくイラスト系の本も調べて買ってみたのだけれど、白紙とか用意してまずラフでイラスト書きましょうねーというパターンがとても多い。 デザインど初心者で創作をしてこなかった人間からすると、白紙から「ノートにラフ」や「デザインカンプ」作りましょうっていう流れになると、 「この間って何をしているの？」とか「何を考えて描けるようになるの？」というおそらくできる人たちには暗黙の了解になっているのであろう 基礎の部分がどうなっ
おそらく多くのWebデザイナーが待ち望んだであろうiPad版のPhotoshopがリリースされました。 私はiPad Pro 9.7インチモデルでさっそく使用してみたのですが、なかなか驚きの完成度だったのでどのようなアプリか紹介したいと思います。 著者は 神速Photoshop [Webデザイン編] をはじめとしたPhotoshopやIllustratorの解説書を書いている @Stocker_jp です。 まずは写真補正から 一眼レフカメラで取り込んだ写真を現像しようとRAWデータを開こうとしても、Photoshopアプリでは開くことができません。 先にLightroomアプリで現像しJPEG形式で書き出す必要があります。 続いてPhotoshopアプリで明るさやコントラストの強さを微調整しようとトーンカーブ補正を探したのですが［調整レイヤー］一覧の中にありませんでした。 さすがに何かの
グリッドシステムのフレームワークを作ってみた
はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作成した経緯 私は仕事で主に所謂Web制作と言われるWebサイトのデザインと実装を両方やっており、業界的に納期が短い中でいかに高いクオリティのものを作るのかが課題だと感じています。深夜や休日も使ってなんとか仕上げることも業界全体の傾向では少なく無いと感じますが、どうしても限界があるので何かしら効率的なものが必要だと思いました。 そこでデザインカンプを作成するときにデザインの情報としての配置にデザイン4原則を取り入れて、ロジックに則ったレイアウトを設計できるフレームワークを作り、レイアウトに迷う時間を短縮しようと考えました。フレームワークを元にすることで、そのサイトならではのコンセプトを体現したレ
はじめに フロントエンドエンジニアを目指してプログラミングを学習しています。 トンテキと申します。 プログラミング学習のアウトプットとして自作のWebサービス-SHAKYO-を制作、公開しました。 この記事では-SHAKYO-の概要や制作過程について説明します。 URL リンク先はこちら- SHAKYO - 目的 ・フルスクラッチ開発を行うことでWebアプリの基本的な構成、動作を知る ・自作のWebアプリで同じ初学者の方の役に立つサービスを提供したい スペック 使用言語 / HTML５/ CSS3 / Javascript / PHP DBMS / MySQL 開発環境 / MacOS Mojave 10.14.6 バージョン管理 / SourceTree(3.0.15) 本番環境 / xserver 主な機能 ユーザー管理機能 ・ユーザー登録機能 ・ユーザーログイン機能 ・ユーザー編集機
モダンなFireworks後継アプリは存在するか？
Webデザイン モダンなFireworks後継アプリは存在するか？ Wednesday, September 18th, 2019 この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFireworks 2Jから使用していますが、最近使用しているAffinity DesignerはFireworksと特徴が似ていて、Fireworksが好きだった方にとって後継アプリとして使いやすいのではないかと思っています。 Fireworksと私 私は 神速Photoshop [Webデザイン編] や プロになるためのWebデザイン入門講座 などの本を執筆しています。 私はなぜかFireworksが嫌いな人と思われているようですが、この本の最後に「Fireworksを使っていたが、Phot
Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。 ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。 Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！ 本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。 発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2
12月9日（月）に開催されたAffinity User Gruop JAPANミーティング #3 で「ウェブ制作に役立つAffinity Designerの使い方と注意点」という内容でお話しをしてきました。当日お話しした内容に少し情報を追加してこのブログでもご紹介します。 目次 以下はページ内のセクションへのリンクです。 動画版もあります はじめに アジェンダ Affinityツールを好きな理由 フル機能iPad版もある、プロ向け本格ツール Affinity Designerが一番好き！ Affinityツールに向いているプロジェクト こんなふうに使ってます Affinityスイートの抜群の互換性 ウェブ制作に役立つ便利な使い方 複数解像度の画像書き出し機能 違う種類の画像の書き出し 書き出すスライスの追加方法 アセットとシンボル機能 レスポンシブ・デザインに便利な「制約」機能 アートボー
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
23新卒エンジニアがチーム開発研修で学んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！ 2023年新卒エンジニアの伴野・谷・和渕です。 サイボウズでは、2023年エンジニア新人研修の集大成として、チームに分かれてソフトウェア開発を行う実践演習が行われました。この記事では、各チームがどんな成果物を作成したのかを、チームごとにご紹介したいと思います。 エンジニア新人研修全体については以下の記事で詳しく紹介されています。ぜひそちらもご覧ください。 blog.cybozu.io 概要 実践演習では3チーム（「チーム gogo!」・「明日から」・「TEMBIN」）に分かれ、それぞれ一つのソフトウェアを2週間で開発しました。「サイボウズ流チーム開発を新メンバーだけで実践できた」「未知見の課題に対してどう行動すればよいか考えるきっかけになった」というコンセプトのもと、自由な発想で取り組みました。 チーム gogo! チーム gogo! では、演習開始時に Mastodon や
Adobe XDで無料のスタータープランを使い続ける方法
Adobe XDはこれまで、有料のプランだけでなく無料のスタータープランがありました。 無料のスタータープランは書き出しや共有に制限があるもののXDのファイルを編集できました。 無料のスタータープランは、デザイナーではない方（営業担当者や経営者、ディレクターなど）がデザインカンプを見たい時や編集をしたい時、自分の考えをデザイナーに伝えたい時などに重宝されていました。 ところが、Adobe XDがバージョン50になってから「無料のスタータープランが使えなくなった」というツイートを多く見かけるようになりました。 その一方で「まだスタータープランは使えるらしい」と言っている方もいます。 どちらかはっきりしないままなのはモヤモヤして気持ち悪いので、Adobe製品をインストールしていないWindows 10にAdobe XDを新規インストールして、スタータープランが利用可能かどうか検証しました。 先
当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ
Web制作で気になることのアンケート結果（2019年版）
Web技術 Web制作で気になることのアンケート結果（2019年版） Thursday, October 24th, 2019 Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを採ってみました。 アンケートの実施期間は2019年1月〜10月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 性別（推定）は 71% が男性、29% が女性となっています。 Webデザイン・コーディ
こんにちは、シフトブレインでエンジニアとして働いている安田（@_yuheiy）です。 先日、株式会社ボーンデジタルから出版された書籍『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』に、監訳者のひとりとして携わりました。 本書は、CSSにおけるレイアウトをテーマとしていますが、同時に、それをあらゆる環境においても破綻することなく、堅牢に実現するための、CSS全般について言える哲学を追求したような書籍です。レイアウトとはどのようにあるべきで、そしてCSSとしてどのように表現されるべきであるかという態度において、首尾一貫した理論を提示するものです。 このように、筆者独自の意見が強く主張される書籍はCSSの文脈では珍しく思えます。しかし本書の主張は、私自身のかねてからの問題意識とも重なるところが多く、また昨今の業界的な常識にアンチテーゼを唱える重要な問題提起だと
私が使用しているChrome拡張機能でWeb制作で役立つものを5つピックアップしました。今年度からWebサイト制作のキャリアが始まる方は参考にしてください！ PixelParallel「PixelParallel」は任意の画像を簡単にブラウザ上にオーバーレイ表示できる拡張機能です。デザインカンプをオーバーレイ表示することで実際のページとのデザインの差異を確認できます。 デザインをコードに落とし込む際に皆さんはどのようにコーディングするでしょうか？多くの人はデザインツールの画面を横に並べて、実際のページと比較しながら作業しているでしょう。 この方法だと余程の鑑識眼がない限り細かいズレが起こっていることに気付けないパターンが多いです。ピクセルパーフェクトの是非に関しては荒れそうなので今回は省略しますが、細かいズレが積もり積もってデザインを忠実に再現していないと判断されるのはもったいないです。
Adobe公式サイトに記載のある通り、Adobe XDは今すぐのサポート終了ではないものの、サポート終了にむけて長期の予告期間となっているようです。新規の開発も終了しているようですね。それに伴い、XDの代わりとしてFigmaを検討されている方もいるかと思います。 弊社ではAdobe XDからFigmaへの移行を約2年前に行いました。そこで、これまでにエンジニアが両方のツールを使用して感じた、Figmaの利点と使いにくい点をご紹介します。 Figmaの利点 ページ機能でのアートボード整理が便利 Adobe XDでは1つのキャンバスですべてのアートボードを管理するような構造になっていました。 Figmaではページ機能があり、これを利用してアートボードをグループ化できます。ワイヤーフレーム、要件定義、デザインカンプなどのプロジェクトを各ページに分類・整理することで、作業が効率的に進むようになりま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita
自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して
デザインにセンスは必要ない、大切なのは「情報を整理」する力 Udemyの人気講師が教える、UI/UXデザインの基礎
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
iPhone 12系統のレスポンシブ対応のメモ書き
本当に求めてるのはピクセルパーフェクトという「要件」ですか？｜榊原昌彦
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
デザインカンプからのHTML/CSSコーディングの練習になる学習サイト
レスポンシブデザインに見るデザインカンプと実装との溝
web制作案件で「ありがちな場面」と「その際に有効な記事」まとめ - Qiita
デザイナーはコードを書くべきか - feb19
JamstackなWeb制作者になるためのロードマップ
Affinity Publisherを最強のプロトタイピングツールとして使うために知っておきたいこと
ドメインモデルからUIデザインとページレイアウトを設計した話｜yuki_sasaki
web制作の実案件で僕が受けたフィードバック箇所を重要度でレベル分けして見た - Qiita
Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について
自作Webサービス -SHAKYO- FWを使用せず素のPHPで制作しました - Qiita
Adobe XDの使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書
ウェブ制作に役立つAffinity Designerの使い方と注意点
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita
当ブログのレスポンシブコーディングについて ｜ TAKLOG
『Every Layout』に到った背景と思想についての私の解釈｜SHIFTBRAIN
Webサイト制作で役立つChrome拡張機能5選 ｜ TAKLOG
エンジニアがAdobeXDからFigmaに移行して感じたこと | techlab / baigie