デザイナー必見！作業効率が大幅に軽減するアプリ「Adobe Preview CC」とは
Webデザインを行う際は、パソコンだけではなく、スマートフォンやタブレット端末などでも表示を確認する必要があります。 パソコン上では最適化されていても、スマートフォンで表示するとデザインが崩れてしまっている、ということは往々にしてあることです。 今回は、デザイナー必見のアプリ「Adobe Preview CC」をご紹介します。 Photoshopユーザーにとってはとても便利なので、まだ利用されていない方は一度インストールしてみることをオススメします。 Adobe Preview CCとは App Store 使用料金：無料 Adobe Preview CCとは、Adobe Creative Cloudが2015年にPhotoshopのアップデートの一環として発表したアプリです。 これまで、Photoshopを使用してスマートフォン対応のデザイン作成をした場合、「書き出し」を行ってスマートフ
地域の魅力を広げるデザイン事務所｜ローカルデザインなら包むデザイン
地域には『何もない』に思えて実はたくさんの良きところがあります。良き点は日常に埋もれてしまい、その地域の人以外の人が知って初めて「へーすごいんだ！」なんて気づく事があります。 厳かなお祭りや絶景の大自然といってイベントだけではなく、よく通っているお店や毎年続いている地域のイベントなども良きところになりえます。 そんな地域の良きところをデザインやホームページ制作を通してスポットを当てる力なることを信念としています。
WordPressテーマを作成するのに役立つサイト・ツール・サービスまとめ
テーマバリデーションサービス The Web Template Verification Service WordPressテーマ的におかしなところがないかチェックする時に使用。 Theme Check WordPress › Theme Check « WordPress Plugins WordPress管理画面から、プラグインでテーマをチェックすることができます。すべてを修正するのは難しいけど警告部分くらいは直したい。 AntiVirus WordPress › AntiVirus « WordPress Plugins テーマのウイルスチェック。一応チェック。 noindex、nofollowのチェック NoFollow noindex、nofollow、nofollowリンクなどをチェックできるChrome拡張。FirefoxだとSeerobotsアドオンが便利。 サイトのnoi
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
WEBサイト制作前やデザイン制作時に欠かせないヒアリングシートを作り直してみた | WEBとかデザインとか | アスパラブログ | アスパラガス
制作依頼時のヒアリングシート ヒアリングシートの内容には、業種によって様々なものがあると思いますが、WEB制作に関して言えば、制作依頼のお話が来た時点や、検討されている段階で、お客様の考えをアウトプットすることに大きな目的があり、その内容をもとにサイトの方向性や目標等を定めていきます。 アウトプットする内容としては、大きく分けて以下のような項目になると思います。 ■ WEBサイト構築の背景・目的 ■ WEBサイトのタイプ（企業サイト、製品紹介サイト・ECサイト、etc...） ■ ターゲットとするエンドユーザーの層 ■ WEBサイトから期待する効果 ■ 同業種・競合他社の有無とその動向 ■ 予算と制作スケジュール ■ 保守・管理に関して WEBサイトを"意味のある・効果のある"ものへと作り上げていく上で、上記項目は欠かすことのできない情報となります。 これらを踏まえた上で、その他様々なヒア
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
これは助かる！Web制作を円滑に進めるために役立つ資料テンプレート
クライアントとの更新やりとりを10倍楽にする（か... / 【無料配布】Web制作における書類一式、そしてド... / WEBサイト制作前やデザイン制作時に欠かせないヒ...他...全5件
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
設計から実装まで、今すぐ始める高速化
ネットで見られる提案書のまとめ | Webデザインのタネ
The W3C Markup Validation Service