クライアントから頂いたデータがWordやPowerPoint形式だった、あるいはテキストだと思って頂いたデータが画像文字だったということは残念ながらあるかもしれません。 この記事では、どうすればWordやPowerPoint形式のデータから画像を取り出したり、画像文字をテキストに変換できるかということについて書いています。 WordやPowerPoint形式のデータから画像を取り出す 例えば作業しているPCにWordやPowerPointが入っていないという場合はどうやって画像を取り出せば良いのでしょうか？ 実は、それらのファイルの拡張子を .zip に変換してからダブルクリックするだけで画像を取り出すことができます。 ※画像は一般的にZIPを展開してできたフォルダー内の［word＞media］フォルダー内にあるはずです。 なぜこのようなことができるかというと、.docx や .pptx

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで

Webニュース 2017年5月の、これだけは押さえておきたいWeb関連の動き Monday, June 5th, 2017 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン キャンセルのキャンセル問題から考えるダイアログデザイン | Goodpatch Blog かなり話題になった記事です。iOSはキャンセルの取り消しに［キャンセル］という言葉を使用せず別の言葉を使用しているので、それに合わせた方が良さそうですね。 執筆した「UIデザイナーのためのSketch入門＆実践ガイド」が発売されました | UXデザイン会社Standardのブログ 最近日本でもユーザーが増えてきているSketchの本格的な解説書のようで、これから読みたいと思っていま

Android ライカダブルレンズの5.9インチスマフォ「HUAWEI Mate 9」レビュー Thursday, June 1st, 2017 私はこれまでスマートフォンはiPhone 5sを使い続けていたのですが、最近HUAWEI Mate 9に買い替えました。 この記事ではHUAWEI Mate 9を使ってみてどうだったかということと、iPhoneをこれまで使っている人がAndroidに乗り換えてどうだったかということについて書きたいと思います。 先に結論を書いてしまうとHUAWEI Mate 9は細部までかなり出来が良く、評価が高いのも納得の出来でした。 iPhone 5sから乗り換えると、スマートフォンの使い道がとても広がったように感じます。iPad Pro 9.7インチと比較してもかなり便利に感じます。 実は2016年からHUAWEIのスマートフォンを検討していた 私は画面の小

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・UI Adobe XD Preview 2 リリース！テキストデータのダイレクト読み込みやグリッドなど | Adobe Creative Station Adobe XD Preview 3 リリース！アートボードのスクロールやテキストの部分スタイリングなど | Adobe Creative Station Adobe XD は、まだ仕事で使うには早いと思いますが地道に進化しているようです。 個人的には、早くレイヤー機能をサポートしてほしいです。 UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog ダミーのテキストや写真ではなく、実際の利用を考えたテキストや

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・UI UIデザインの面倒な部分を自動化！ラクしてプロトタイプが作れる「Adobe XD」のメリット/デメリット | dwango creators’ blog（ドワンゴクリエイターズブログ） ワイヤーフレームとプロトタイピングツールの決定版！『Adobe XD』が本気で使いやすくて超オススメ | バンクーバーのうぇぶ屋 Adobe XD、どうせパフォーマンスが低いだろうと思って試してもいなかったのですが、この記事を読むと結構パフォーマンスは高いようで、一度試してみようかという気になりました。 使い方の動画は、英語ですが以下のような動画もありました。 Facebookのプロトタイピングツ

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Serif Labs、Adobe PS&Aiの代替アプリとして人気の「Affinity」シリーズをWindowsプラットフォームにも展開すると発表。 | AAPL Ch. Adobe Illustrator 代替アプリ（レイヤースタイル機能もあり、Webデザインカンプ制作に使える）として有名な Affinity Designer と、高機能な写真編集アプリとして有名な Affinity Photo のWindows版をリリースするようです。 私は Affinity Designer はWebデザイナーの間で普及する可能性があると思っていますが、そうすると Mac しか選択肢がなくなるの

HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く　　このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず

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

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

約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を買い換

Coda 2 が5月24日の0時に発売され、「本日限り半額（App Storeで ¥4,300）」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうｐするレビュー記事を見てから購入予定だからですよ :) ﾎﾚﾎﾚ…ﾝ? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが

ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最

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

これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ

「スマートフォン時代のWebデザインスクール」は、これからWebデザイナーになりたい社会人の方向けの入門スクールです。 現在、COVID-19感染拡大防止のため渋谷の教室での授業は休止しておりますが、ご自宅にて動画で受講頂くことが可能です。 以下のようなことを効率よく学べます。 Web制作は初めての方のためのウェブデザインの基礎知識 UI/UX、Adobe XDを使用したプロトタイピング制作などモダンなWeb制作に必要な知識 Adobe Photoshop・Illustratorなどを使用した、スマートフォン・タブレット・パソコンなどさまざまな端末で表示できるWebデザインカンプの制作方法 他のスクールでは学べない、効率の良いWebデザイン制作の方法 昨年内容を大幅リニューアルし、Adobe XDを使用したプロトタイピング・UI/UXなど、モダンなWebデザインに必要な内容を大幅に増やして

WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script

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

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