WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加

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製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI 価格改定に関するお知らせ – Adobe Blog 価格を上げるか下げるかについては書かれていませんが、以下の記事には「Adobe CCグループ版は1,000円の値上げ」と書かれていますね。 Adobe 製品の価格改定に関するお知らせ – Adobe Creative Cloud グループ版 EdgeがChromiumに Microsoft Edge、Chromiumベースに――旧Windowsでも作動、macOS版も登場へ 以前から噂はあったEdgeがChromiumベースになる、つまりChromeと同じブラウザエンジンになるという話は本当でした。 特にMozilla界隈の方は、ブラ

この記事は、まだまだPHP 5系でWordPressを使用している方が多いため注意喚起として書きました。 先日Twitterでアンケートをとったのですが、PHP 5系が2018年末でサポート終了するということはあまり知られていないようです。 WordPressを利用されている方向けのアンケート: PHP 5.xは2018年内でサポート終了することを知っていましたか？ Twitter Webやアプリの投票機能でご回答ください。 — なつき@Webデザインスクール土曜開催 (@Stocker_jp) 2018年12月15日 ※ここで言うサポート終了というのは電話サポートのような意味ではなく、「セキュリティアップデートがなくなる」ということです。 たとえば、2014年にWindows XPのサポートが終了した時のように、今後使用し続けるのが大変危険であるということを指しています。 それぞれのバー

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI Illustrator CC 2019アップデートまとめ｜DTP Transit 別館｜note かなり網羅されていますね。字形ミニパネルの非表示は望んでいる方が多かったようですね。 余談ですが、私もIllustrator CC 2019のアップデート内容をまとめたVtuber動画を公開しています。 ほかにPhotoshop CC 2019のアップデート内容などいろいろな動画を公開しています。良かったら以下のリンクからチャンネル登録していただけると幸いです。 動画一覧・チャンネル登録こちら – YouTube フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pi

Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。 それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。 この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。 Photoshop向きのデ

Webニュース 2018年6月の、これだけは押さえておきたいWeb関連の動き Tuesday, July 3rd, 2018 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Google サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに | 編集長ブログ―安田英久 | Web担当者Forum かなり誤解されている方も多いですが、通常のGoogleマップから［地図を埋め込む］でページに設置したマップ ―― そのままで問題なし とのことです。 影響があるのは 「Static Maps API」「Maps JavaScript API」「Maps Embed API」などを使って埋め込んでいた

以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か

Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。 アンケートの実施期間は2017年1月〜8月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 IE対応について Web制作者

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント （1/3）：CodeZine Webブラウザー、Dreamweaver CC 2014、Brackets などで利用できる、PSD の Extract（抽出）機能は、最近私もWebブラウザー版と Brackets で利用してみましたが、なかなか便利で、コーディングが速くなると感じました。 たとえば、長方形シェイプレイヤーをクリックで選択した状態で、CSS で ba… と入力開始すると、background: #f00; のように、今選択しているシェイプの

遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。 iPhone, iPod touch, Android, Windows Phone, BlackBerry などの各種スマートフォンのほか、 Kindle, Sony Tablet, Nexus 7 などのタブレットではスマートフォン用のテーマで表示されるはずです。 iPad は、PC 用のテーマのほうが見やすいと感じたのでそのままにしています。 なぜ今までスマートフォン用のテーマを作っていなかったのか 一番大きな理由は「見づらいというご意見をいただかなかったから」です。 また、昨年まではスマートフォンからのアクセスは 10% ちょっとしかなかったため、それほど必要性を感じていませんでした。 とはいえ全く何の対応もしていなかったわけではなく、iPhone や Android の場合は、本文のフォントサイズが少し

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 高品質な素材を無料ダウンロードできるCreative Cloud Marketが登場 – 448.jp blog Adobe が、Creative Cloud 有償サービスのメンバー向けに商用利用可の素材をダウンロードできるサービスをはじめました。 作品は Behance から選ばれているようです。 Photoshopのガイド作成用スクリプト「Speed Guide」を作りました – saucer Photoshop CS6／CC／CC2014 対応の、ガイド作成用スクリプト（JSX）です。 ダイアログに「5 10 15 20」のような数値を入力すると指定した位置にガイドが引けます。 右

MacBook Air などのラップトップ型の Mac を長く使っていると、Macintosh HD（内蔵ハードディスクや SSD などのストレージ）の空き容量がなくなってきて困ることもあるかと思います。 私の場合、MacBook Air の 256GB モデルを使用しており、先日どうしても Macintosh HD に 64GB 以上の空き容量が欲しかったので、以下の方法を試したところ 90GB 以上の空き領域を作ることができましたので紹介します。 ※この記事は、ファイルの移動や削除、パーティションの作成などについて書いています。それらの作業を行う際は、必ずバックアップを取ったうえで作業を行い、必要なファイルやパーティションを誤って削除しないよう、細心の注意を払って作業を行ってください。 この記事を参考にしたことで発生した、いかなる損害も一切補償できません。 何がHDを占領しているか調べ

Mac の主なアプリケーション（たとえば Keynote、Mail など）では、単純に command + V キーを押してペーストすると、フォントのスタイル（色やサイズなど）を保持したままペーストしてしまいます。 スタイルなしでペーストしようとするために command + option + shift + V キーを押すという方法もありますがこれは面倒です。 そこで、他のブログなどでは command + shift + V キーでもいける（option キーを省略してもよい）という方法が紹介されていたりして、これはこれで便利なのですが、それよりも自分の Mac であればキーボードショートカットを設定してしまうと楽です。 設定方法 画面の下の方に表示されている Dock の中の「システム環境設定」アイコンをクリックするか、画面左上（メニューバーの左端）の Apple マーク（リンゴのマ

このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple

「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル

「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という声を最近よく聞くので、これから数回にわたって「Macの基礎の基礎」という連載をすることにしました。 アプリケーション別に記事を書く予定で、第1回目となる今回は「Finder」編です。 記事の内容は基礎編ですが、最後に Mac ユーザーの間でも意外と知られていない機能や新機能について書いています。 なお、この記事は主に Mac OS X 10.7（Lion）以降向けに書いていますが、私は OS X 10.9（Mavericks）を使用していますので、設定画面や機能など多少異なる場合があります。 画面キャプチャー（画像）は、すべて OS X 10.9（Mavericks）のものです。 はじめに: Windowsユーザーの方へ この記事は、基本的に「Mac に乗り換えたけどいまいち使いこなせない」方向

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 今年もよろしくお願いします。 Webデザイン Illustrator CC（17.1）アップデート概要（1）ライブコーナーと鉛筆ツールの改良、カスタムツールパネル – DTP Transit（CC, Illustrator） 先週このブログに書いた記事 Photoshop CC、ついに外部ファイルをリンクできるように には Photoshop CC 14.2 の新機能に絞って書きましたが、実は Illustrator も結構アップデートされています。 Illustrator で図形やイラストを制作される方には便利な変更だと思います。 Illustrator Layer Exporter Photosh

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、実験的に1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめてみました。 好評であれば、来月以降も続けたいと思っています。 スマートフォン関係 iPhoneのシェア5割超え、Androidの不振続く――IDC調査 私は、世界規模で見ればスマートフォンのシェアは今後も Android が伸び続け、iOS は次点になると思っています。 しかし、日本は例外なのかもしれません。 その理由としては、 SoftBank をはじめ、日本では Android 端末より iPhone の方が安く手に入りやすいこと 日本人はブランド信仰が強いこと 「ドコモから iPhone が出るのを待ってた」という方が今でも多いこと 国産の Android 端末の出来が悪かったこと（ガラケーに回帰