PSDファイルのCSS取得や書き出しを効率的に Avocodeレビュー
とある経緯でAvocodeのベータ版への招待を頂きましたので、ひと通り使ってみてレビュー書きました。若干チュートリアルっぽくなってますが… どんなツール？ デザイナーが作成したPohotoshop（またはSketch）のデザインファイルからCSSの取得や書き出しを簡単に行えるツールです。編集などは一切行えません。 フロントエンドエンジニア向けのツールとなります。 Avocode 使い方 ファイルの読み込み ベータ版ではPhotoshopファイルからの読み込みしか対応してません。またサンプルが幾つか用意されてます。正式版ではDropboxや（おそらくCDNも）を使ってファイルを共有することができるようになりそうです。 「Sync new design」以下の「Photoshop Plugin｝ボタンからPhotoshopのPluginがダウンロードできます。ダウンロードしたら有効にしておきま
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
柔軟なワークフロー
少し前からWeb制作のワークフローの変化をあちらこちらで聞くようになりました。今まで調べてきたことと経験から学んだことを交えて今の考えをまとめてみました。 Web制作フローの再考とDesigning in the browserを書いた頃からワークフローの変化を意識しており、いろんな記事を読んだり自分なりに考えたりしてます。現在のところ僕が思うのはワークフローはひとつに定められない、ということです。 関わるチームや環境、制作するサイトによって最適なワークフローは変わってきます。例えばオーソドックスな静的なサイト制作とJS、CSS3など比較的新しい技術を駆使したサイト制作、レスポンシブWebデザインの場合ではワークフローは変わります。今までのサイト制作はワークフローが一様でも問題となることが少なかったですが、そうではなくなってきています。 複雑な設計のサイトではプロトタイプなどを用いて早期に
フリーランスになって一年経って
仕事形態をフリーランス一本にしてから4月1日で丸一年経ちました。フリーランス歴の長い諸先輩方は沢山いるのですが、一年目の今だから書けることもあると思うので、一年経った今どんな状況なのかツラツラと書いてみました。項目は順不同です。 今の状況 Webデザイナーと言う肩書きで、デザイン、コーディング、ディレクション案件を受けてます。今のところ9割受託です。受託のみというのは不確定要素が大きく、また”仕事を受ける”立場上、自由度も制限されます。この先は今の体制を変えてくつもりですが、取り敢えず最初の一年は予定通りです。まだ今後の展開がハッキリ定まってなかったので、後々動きが取りやすいようにスポット的な案件のみとしていました。 仕事の依頼元 勤めてた職場から 知人から Webサイトから 収入源、つまり仕事の流入元は複数ある状態を意識してます。 何社か転職しましたが、円満退職でしたのでそこから仕事の依
「Webデザイン」とはなにか？ザックリ考えてみた（2013年）
「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。 はじめに このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 内容は「Webデザイン」の範疇を超えてるのですが、前回と同じタイトルにしてます。ただし、年末年始バタバタしてて時間掛けて考えることができなかったので、”じっくり”を”ザックリ”に変更してます。 また、この記事は2012年の総括や2013年のトレンドではなく、制作者の立場からWebについて今の自分が思ってることをつらつらと書いてます。なので、異なる意見があって当然だと思ってます。 読んでくれた方が「webデザイン」について考える一つのきっかけになっ
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Photoshopで理論的に配色はできないものか検証してみた
最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot
Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
Adobe Bridgeの使い方と便利な10機能
個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 多数の形式のファイルをプレビュー サブフォルダ内の表示 ファイル名のリネーム ワークスペースの切り替え キーワード・レート・ラベルの追加 フィルター スマートコレクション スタック フルスクリーンプレビューやレビューモード Mimi Bridge Adobe Bridgeは写真や制作ファイルの管理・閲覧が簡単にでき
Appleが推奨するSkeuomorphic Designとそのメリットデメリット | Design Spice
最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Designと呼ぶそうです。このSkeuomorphic Designについて書いてみました。 最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。 このSkeuomorphic Designについて書いてみました。 Skeuomorphic Designとは まずskeuomorphという言葉から。 skeuomorph 語源：ギリシャ語のskeuos（容器、実装）morph（フォーム）から。 skeuomorphは、様々な目的のために用いることができます。 デ
フリーランスになりました
3月31日で派遣の仕事を辞めて、4月1日より完全にフリーランス一本にしました。 ご挨拶 4月1日より完全にフリーランスになりました。 正確には去年からフリーとして活動はしてたのですが、 3月までは派遣と並行しており、4月からはフリーランス一本になります。 屋号はツクリベ(TSUKURIBE)です。 いちクリエイターであり続けたいという思いからです。 TSUKURIBE 数ヶ月は仕事がない可能性も考慮してたのですが、 幸い仕事がある状態でスタートを切れました。 こうして好スタートが切れたのも周りの方達のおかげであります。 本当に感謝してます。 周りの方に助けられたり刺激を受けながら精進していきます。 今後ともよろしくお願い致します。 以下はこれまで経緯や今後の話です。 長文なので興味のある方は読み進めてください。 発端 昨年一月にそれまで勤めていた職場を退職しました。 割と自由がきいて恵まれ
無料のベクター素材を提供しているサイト40選
先日の「無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選」に続き、ベクター素材を提供しているサイトのまとめです。やはり個人的な整理のためのまとめですが共有します。 先日の無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45に続き、 ベクター素材を提供しているサイトのまとめです。 やはり個人的な整理のためのまとめですが共有します。 はじめに 全てを網羅するのは逆に手間だと思うので、 この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。 また、サイトによってはphotoshopの素材とベクター素材を扱ってるサイトもあり、 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45で取り上げたサイトはこちらには載せてません。 上記エントリーのサイト説明に
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/