この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo

DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海

この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H

私が執筆した「プロになるためのWebデザイン入門講座　実践で役立つPhotoshop＆Illustrator徹底ガイド」が7月24日に技術評論社より発売されました。 表紙（カバー含む）も私がデザインしています。 Amazon で紙の書籍版を購入する Gihyo Digital Publishing で電子書籍（PDF）版を購入する この本は、PCの基本操作（エクスプローラーや Finder でファイル整理、文字列を選択してコピーなど）ができる方であれば、まったくWebデザイン制作の経験がない方でもWebデザインの基礎を学び、Web制作のためのPhotoshopとIllustratorの基礎を学び、広告バナーや架空のカフェのWebサイトを制作できるように書かれています。 本書の内容 本書は、7つの Chapter（章）で成り立っています。それぞれの Chapter は以下の内容となっています

この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。 AquaKanaとは AquaKana（Aqua かな、アクアかな などと表記されることもあります）は、OS X（Mac の OS）のメニューやタイトルバーなどの UI に使われているフォントの名前です。 隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。 Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル　ウインドウ　ヘルプ」などを比較するとこんな感じです。 AquaKana は一見ゴシック体の

私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa

この記事は、WordCamp Tokyo 2012でお話した「WordPressでWebアプリケーションを作る方法～Croppy編～」の内容をまとめ、分かりやすいように + 一部のコードについてセッションよりも詳しく加筆したものです。 WordPress に Twitter・Facebook ログインのようなソーシャル性を取り入れたWebアプリを作るためのプレゼンをするにあたり、最初は「ノンプログラマーでもできる」みたいなタイトルにしようかと思ったのですが、さすがに PHP が分かっていないと厳しいかと思いますので入れませんでした。 普段 PHP を全く書かない方には少々難しいかもしれませんが、ある程度 WordPress をカスタマイズできる方ならなんとかなるかな…という程度かと思います。 Croppyとは Croppy は、ほぼ WordPress でできているWebアプリです。 気に

現在開講している、社会人のためのWebデザインスクール で私と一緒に講師をされているユミソラさん（ @YumiSora ）は、以前のスクールでも Fireworks 特別講座を担当して頂きました。 その際、「桜の作り方」というレッスンは Fireworks 特有の操作が上手くまとまっていたので、ユミソラさんに許可を頂いて記事にしました。 Illustrator でも同じものは作れそうですが、普段 Fireworks を使わない私には新鮮でした。 Fireworksで桜を作る 今回作る桜はこんな感じです。 桜の形はパスの型抜きでサクッと作れそうですが、5等分に回転して並べる部分はどう作るのか気になりました。 まず新規作成し、楕円ツールをクリックし、塗のカラーでピンクを選択し、Shift キーを押しながらドラッグして正円を描きます。 このあたりは Photoshop や Illustrator

このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 と CSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先に HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTML と CSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTML・CSS コーディングについては

「なぜブログを書くべきなのか、ブログを書くとどのような良いことがあるのか」という問いに対してはさまざまな答えがあると思います。 今思いついたものだけでも ちょっとうろ覚えになっていることをブログにまとめることで、思考が整理できる 仕事につながる、自分をプレゼンするツールになる WordPress や MovableType 等の勉強になる 書く習慣をつけることで、文章がうまくなってくる などでしょうか。 アフィリエイトバナーを貼っているのであれば、ちょっとしたお小遣い稼ぎにもなるかもしれません。 しかし、この記事は元々「Web業界への就職を目指す」Webスクールの授業の時に話した内容をそのままテキストに起こし、一部追記したものですので、基本的に「仕事につながる、自分をプレゼンするツールになる」という部分に焦点をあてています。 建築家「フランク・ロイド・ライト」が仕事を得るためにやったこと

2011年もまもなく終わろうとしているので、今年を振り返って「買ってよかったな」と思ったものと「やってよかったな」と思ったことをまとめておこうと思います。 基本的に Web 関係のことが多いですが、一部ゲームや Web 以外の本についても書いています。 まずは「買ってよかったもの」から。 WebデザイナーのためのjQuery入門 PixelGrid の @Takazudo さんが書かれた jQuery の入門書です。 @Takazudo さんとは Sugamo.css 等の勉強会でちょくちょくお会いしているのですが、JavaScript に関してとても高度な話をされている方なので、jQuery の本を出版されると聞いても、正直「私には理解できないような高度な話なんだろうな…」と思っていました。 ところがこの本、「Webデザイナーのための」というだけあって、プログラミング経験が全く無い方でも

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない

Web サイト構築のためのトータルデザイン誌 Web Designing 2011年 12月号 に、jQuery × WordPress 活用事例ということで Croppy の作り方を掲載させて頂きました。 記事は2ページしかない関係でほんの一部の情報とソースしか掲載出来なかったため、こちらの記事で色々と補足させて頂きたいと思います。 ちなみに、この記事は WordPress Advent Calendar 2011 という「12月1日から12月25日のクリスマスまで一人一つずつ自分のブログにWordPressについて何かしら書いてくイベント」で昨日の @horike37 さんに続き、6番バッターとして執筆しています。 目次 なぜ WordPress で作ったのか 記事の追加はどうやっているのか 記事の削除はどうやっているのか Web Designing記事の補足 色彩分析などの情報はどう

昨日は、はじめて iPhone を使った日のような、新鮮で、とても心地よい感動を味わうことができました。 iPhone 版 Flipboard は、私が想像していたより遥かに便利で、快適で、心地よいアプリでした。 iPad 版 Flipboard が素晴らしいという噂は以前から聞いていて気になってはいたのですが、MacBook Air も持っているのに Flipboard だけのために iPad を買うのはちょっとな…と思って買わなかったため今まで Flipboard を使ったことはなかったのですが、ようやく iPhone 版がリリースされたため、昨日はじめて使ってみました。 Flipboard を起動すると、どんなジャンルのニュースを読みたいかを選択する画面になります。 News、Technology、Designなど… 好きなものを選択すると、Flipboard の画面にカテゴリ別に、

Webデザイン Webデザインや配色をサポートする新サービス「Croppy」をリリースしました Wednesday, October 26th, 2011 WordCamp KOBE で私の講演をご覧になった方はご存知かと思いますが、Webデザインや配色をサポートする新サービス Croppy（クロッピィ） をようやくリリースしました。 Croppy にアクセスすると、このようなページが見れます。 色々なサイトのパーツが「ヘッダー」や「サイドバー」「ボタン」などカテゴリ毎に並んでおり、ブブンデザインアーカイブ のように見えるかもしれません。 しかし、Croppy は集められたパーツを見るだけではなく「今見ているWebページをブラウザ上で切り抜き、手軽にスクラップできる」のです。 Twitter または Facebook アカウントで Croppy にログインしたあと、気になるデザインのサイト

皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基

私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。 たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。 なぜスケッチが必要か？ 多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。 なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。 デザインは、ソフトが自動的にやってくれるものではありません。 自分の力で1から作る必要があるのです。 そのために、「良いデザイン」とされてい

この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。 当日はたくさんの方にお越しいただきありがとうございました。 会場に入れなかった方もいらっしゃったそうですみません。 この記事で、少しでも内容を共有できればと思います。 このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。 このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。 このセッションで伝えたいこと このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジ

さて、SEOを意識してコーディングしたところで、サービスをオープンしてすぐに人が来てくれるわけではありません。 昔は新しいサイトやサービスを作ってもすぐには人が来てくれないのが当たり前で、色々なサイトに相互リンクを申し込んだりして地道に人が来るのを待っていたものですが、今は Twitter、Facebook、はてなブックマークなどのソーシャルメディアを少し活用するだけで初日から沢山の方に来て頂けるので楽しいですね。 この記事では ソーシャルメディアとは何か なぜソーシャルメディアマーケティングが重要になったのか サイト制作・運営者はソーシャルメディアとどのように付き合い、活用すべきか について考えてみたいと思います。 この記事を書くにあたり、「ソーシャルメディアマーケティングとは何か」ということについて、渋谷にあるソーシャルメディアマーケティング会社 株式会社ハロ 取締役の @ossam