Cacooのワイヤーフレーム用ステンシルを公開しました

各デバイスサイズにあわせた枠線ステンシルをCacooストアで公開しました。 レスポンシブサイトのワイヤーフレームを作成する際に、「ファーストビューエリア」を明示することなどに使用して頂ければと思います。 追加方法 Cac […]

広告ここから
広告ここまで

目次

    各デバイスサイズにあわせた枠線ステンシルをCacooストアで公開しました。

    レスポンシブサイトのワイヤーフレームを作成する際に、「ファーストビューエリア」を明示することなどに使用して頂ければと思います。

    追加方法

    CacooStore-0

    Cacooストアにアクセスします。

    CacooStore-2

    カテゴリから「ウェブ」を選択します。

    CacooStore-2

    「通常購入する」をクリックして追加します。(無料です!)

    使い方

    まずはデフォルトのステンシルを利用してメインコンテナを作成します。

    インスペクタパネルを活用しつつ

    インスペクタパネルを活用しつつ

    そして「FirstViewFrame」ステンシルから、作成したいデバイスの枠線を追加します。

    ドラッグ&ドロップ

    あとは赤枠の中にファーストビューコンテンツが収まるように配置していきます。

    こんな感じ

    iPhone5/Androidなどについて

    「レスポンシブサイトのファーストビューを明確にする」という目的から作成しましたので、スマートフォンサイズは最も解像度の低いiPhone3Gをベースにしています。

    縦横比3:2のデバイスであれば「縦横比を固定」したままサイズ変更させることで対応可能ですが、iPhone5などについては追って追加するような形になりそうです。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark