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デザインを完結させるワーク
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary
Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。 それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。 この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。 Photoshop向きのデ
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
iPhone XのiOS 11.11以下と11.12以上どちらにも対応するWebページの作り方
WebKit公式サイトを含め、多くのWebサイトで解説されている「iPhone X対応のWebページの作り方」はiOS 11.11系まで、またはiOS 11.12以上のどちらか一方にしか対応していないため、その両方に対応する書き方について解説します。 この記事の内容は「スマートフォン時代のWebコーディングスクール」の授業資料の一部です。 iPhone X対応していないWebページはどう見えるのか 縦持ちでは特に問題ありませんが、横持ちの場合画面の左右に空白ができてしまいます。 たとえば、このブログの記事ページを横持ちで観ると以下の画像のように見えます。 このブログの場合、bodyの背景色は濃い茶色、ページ全体を包んでいるwrapper要素に背景画像が設定されています。 iPhone Xのセーフエリアについて iPhone Xのディスプレイを横向きにした時、センサーハウジングや角丸の部分を
Macintosh HDを整理し、空き容量を効率よく増やす方法
MacBook Air などのラップトップ型の Mac を長く使っていると、Macintosh HD（内蔵ハードディスクや SSD などのストレージ）の空き容量がなくなってきて困ることもあるかと思います。 私の場合、MacBook Air の 256GB モデルを使用しており、先日どうしても Macintosh HD に 64GB 以上の空き容量が欲しかったので、以下の方法を試したところ 90GB 以上の空き領域を作ることができましたので紹介します。 ※この記事は、ファイルの移動や削除、パーティションの作成などについて書いています。それらの作業を行う際は、必ずバックアップを取ったうえで作業を行い、必要なファイルやパーティションを誤って削除しないよう、細心の注意を払って作業を行ってください。 この記事を参考にしたことで発生した、いかなる損害も一切補償できません。 何がHDを占領しているか調べ
ChromeのアドレスバーからGoogle翻訳する方法
Web制作をしていると、ちょっとした英語の文章を日本語に訳したい、または日本語の文章を英語にしたいということがあります。 そういったとき、［Google翻訳のページを開く＞文章をペーストして翻訳ボタンを押す］よりも、ChromeのアドレスバーからGoogle翻訳できると少し便利です。 以下の方法は、Chrome for Mac/Windowsで使用できます。Android/iOSでは使用できないようです。 設定方法 Chromeの環境設定を開き、右上の検索ボックスに［検索］と入力します。 ［検索エンジンの管理…］をクリックします。 ［その他の検索エンジン］の1番下の箇所に以下のように入力します。 ［検索エンジンを追加］に［Google翻訳］ ［キーワード］に［tr］ ［URL］に［http://translate.google.co.jp/?source=osdd#auto|auto|%s
HTML5のセクショニング・コンテンツについて知っておくべきこと
この記事は、スマートフォン時代のWebコーディングスクール のスライドの一部を再構成した記事です。 この記事ではHTML5以降の「セクショニング・コンテンツ」に絞って書いています。 HTML5以降で一般的なWebページをマークアップしようとした際、セクショニング・コンテンツへの理解は不可欠であると私は考えています。 セクショニング・コンテンツとは まず「セクション」とは「区分、節、（会社などの）部門」のことを指します。 要するに「区切り」のことです。 セクショニング・コンテンツは「見出しやフッターの範囲を定義する コンテンツ」のことで、潜在的に見出しとアウトラインを持っています。 これまでのHTMLだと何が問題？ 上の図はスライド資料のため、「記事小見出し」の下にあるはずの本文や、サイドバー内にある要素は省略しています。 例えばこのような場合だと、人間にはどこからどこまでが本文でどこがサイ
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
「AdobeユーザーのためのBlender入門」というチュートリアルを作りました
普段 Adobe Illustrator や Photoshop を使ってデザイン制作をしている、あるいはそれと同等のPCスキルがある方向けの Blender というアプリケーションを使った3DCG制作の入門チュートリアルを公開しました。 こちらのページで体験できます。 AdobeユーザーのためのBlender入門 Blenderとは Blender とは、オープンソースで公開され無償で利用できる統合型3DCGソフトウェアです。 ※統合型3DCGソフトウェア: 要するに色々なことができる3DCGソフトのこと。「モデリング」とよばれる形を作る機能はもちろん、アニメーションやレンダリング、動画編集など色々なことができる。 無償というと「低機能ではないのか」と思われる方もいらっしゃるかもしれませんが、Blender は数十万円の有償ソフトと比べても劣らないほど多機能なソフトウェアです。 おそらく
2015年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 スマートフォン関連 iPhone 6sの「深押し」3D Touchの使い方。アプリ設計はどう変わる？ (深津貴之 fladdict のUIコラム) – Engadget Japanese 3D Touchの導入で、通常のタッチに加え、「深押し（ディープ・タッチ）」「浅押し（シャロー・タッチ）」の２つの新しいジェスチャーが追加されます。 アプリ開発者はともかく、Web制作者には関係ない…と思っていたら、Safari でも取得できるらしいですね。 Swift – ローディング時のズルい進捗表示 – Qiita 似たようなことを考えたことはあったのですが、実際ユーザーから否定的な反応ってほとんどなくてうまく
ブログの記事内画像を楽してRetinaディスプレイに対応させる方法
「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。 ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。 メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。 しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。 そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。 このブログでは、WordPress で記事を書くときに［メディアを追加］を
Macの基礎の基礎: Spotlight編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
Google Analyticsのコードがコピーされても動かないようにする方法
Web関係のブログをやっていると、なぜかページ内の JavaScript などがそのままコピーされて中小企業のWebサイトにペーストされ、Google Analytics に見知らぬWebサイトの URL が混じってくることがあります。 これで困っている方がいたので、自分のサイト以外に自分のサイト用の Google Analytics コードが使われても動かないようにする方法を考えてみました。 JavaScriptで、表示されているページのホスト名を取得する JavaScript では、location.hostname プロパティを使用すると、今表示しているページのホスト名（example.com など）を取得することができます。 参考: window.location – Web API インターフェイス | MDN たとえば、このページを表示している時に Chrome の開発者ツール
2014年7月の、これだけは押さえておきたいWeb関連の動き
「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」のような数値を入力すると指定した位置にガイドが引けます。 右
GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ
2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
Macの基礎の基礎: テキスト入力と編集とテキストエディット編
このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple
2014年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 WindowsからChrome OSへ？ ASUSが激安約1万円台のファンレスボックス型PC「Chromebox」を発表 – GIGAZINE Chromebox は、Chrome OS を使ったデスクトップPCです。 Mac mini のような小型デスクトップPCですが、「179ドル(約1万8200円)から」という低価格です。 これだけ低価格だと、CPU も ARM の低価格なものかな？と思いきや、 Intel Celeron 2955U (2C/2T 1.4GHz 2MB L3) Intel Core i3-4010U (2C/4T 1.7GHz 3MB L3) Intel Core i7-460
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
