Webデザインツールはどれを使えばいいの？
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
書いて覚えるSVG: 基礎編
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
Web制作で気になることのアンケート結果（2018年版）
Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。 アンケートの実施期間は2017年12月〜2018年12月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 Webデザイン
「PCをWin7のままにしておきたいのに強制的にWin10にするMSが嫌だ！Macに行く！」という方へMacユーザーとして言っておきたいこと
Twitter などで「5年前に買ったPCを Win7 のままにしておきたいのに、強制的に Win10 にする MS が嫌だ！もう Mac に行く！」などというツイートを見かけることがありますが、Mac が大好きで、普段Macユーザー増えることに対して大歓迎のスタンスである私から1つだけ言っておきたいことがあります。 「こっち来んな。以上」 この記事はこれで終わりです…と言いたいところですが、さすがにこれだけでは普段 Mac を使っていない方には投げやり過ぎるかもしれないのでその理由を書いておきます。 5年前に買ったMacを使い続けられるのか 少なくとも メインマシンとして仕事でバリバリ使う のは厳しいです。 私の場合、5年前に買った Mac といえば MacBook Air 2011 ですが、4年前に知人に売却しています。 さすがに Mac を毎年買い換えている方は多くはないと思いますが
Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
2015年2月の、これだけは押さえておきたい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月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 コーディングを考慮したWebデザインガイドライン Webデザイン用の Photoshop の基本設定、1px 未満のにじみを発生させない、共通モジュールの外部ファイル化など、コーディングしやすいWebデザインカンプを Photoshop で制作する方法について。 Photoshopでバナー “いい感じ” に制作せよ！ Photoshop でバナーを作る時の環境設定やテキストツールの使い方など。 このブログの [Webデザイン] 文字組みについて本気出して考えてみた も紹介されていました。 DTP→Webデザイナー転向時に、これやったら捗ったよリスト13 | 279-design DTP（
Macintosh HDを整理し、空き容量を効率よく増やす方法
MacBook Air などのラップトップ型の Mac を長く使っていると、Macintosh HD（内蔵ハードディスクや SSD などのストレージ）の空き容量がなくなってきて困ることもあるかと思います。 私の場合、MacBook Air の 256GB モデルを使用しており、先日どうしても Macintosh HD に 64GB 以上の空き容量が欲しかったので、以下の方法を試したところ 90GB 以上の空き領域を作ることができましたので紹介します。 ※この記事は、ファイルの移動や削除、パーティションの作成などについて書いています。それらの作業を行う際は、必ずバックアップを取ったうえで作業を行い、必要なファイルやパーティションを誤って削除しないよう、細心の注意を払って作業を行ってください。 この記事を参考にしたことで発生した、いかなる損害も一切補償できません。 何がHDを占領しているか調べ
Macの基礎の基礎: Spotlight編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
Stocker.jp 管理人のブックマーク
フリーランスのWebデザイナーです。 東京の下北沢で、うさぎと一緒に暮らしています。 渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。 Twitterでは、Web制作に関する最新情報をツイートしています @Stocker_jpさんをフォロー 新着記事 「スマートフォン時代のWebコーディングスクール」を渋谷で開催します 「スマートフォン時代のWebコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを全7回で学べる社会人向けのスクールです。 モダンなFireworks後継アプリは存在するか？ この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFi
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
私が月に1度やってるMacのメンテナンス方法 | Stocker.jp / diary
私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa
MacBook Air 2012のレビューとWeb制作者のための設定など
約1ヶ月前に MacBook Air 2012年版 が発売されたので、早速2011年版 MacBook Air から買い替えました。 今回購入したのは、13インチ / Core i7 / メモリ 8GB / SSD 256GB です。 去年の記事 では MacBook Pro 13インチから MacBook Air 13インチに買い換えた時の感動を中心としたレビュー記事でしたが、今回は時期的に、欲しい方はもう購入されていると思いますので、レビューだけではなく私がイントールしたアプリとその設定を中心に書いていきたいと思います。 目次 なぜMacBookを買い換えたのか なぜそのスペックにしたのか Apple Store店員の話 検証 その他のレビュー 私のMacBook Airの使い方 インストールしたアプリ 外付けスピーカー いくつかの問題点 気になった点 総評 なぜMacBookを買い換
10分くらいで分かるXHTML+CSS
このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 と CSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先に HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTML と CSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTML・CSS コーディングについては
これからWebデザインの勉強を始めたい方のためのまとめ
これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
auのiPhoneからSIMフリーのiPhoneにMNPで乗り換え、月々の通信料を1728円にした方法
