BLOGブログ

ブログ

2017年07月22日

Adobe Muse のレスポンシブサイト Vol.1【居候日記NO.6】

先週、佐渡島までカブで行ってきたkousakusanです。

 

カブは高速に乗れないので全て下道で行くのですが、さすがに4時出発だと誰も走っていなく

それは地方に行くと顕著になり、さらに快適に。そして三国峠を越えるころには気温が10度近くになりめっちゃ寒い。いやいや、真夏でしょ。ここまでとは、予想外で、湯沢超えるまでは震えながら走っていきました。

でも、三条燕ではやはり猛暑でだるいっす。miitanの故郷は暑く、広く、田んぼな町でしたよw

そんな事を考えて、仕事していると・・・・

LP作らなくっちゃって、気が付いてしまったわけです。でも、時間もリソースもなく、短時間できっちりとクライアントが納得できるサイトをと思い、今回はAdobe Museを起用したって事なのです。

 

さて、レスポンシブ対応のサイトを作るには一つの関門があります。

オブジェクトやテキストのレイアとが画面サイズに合わず崩れてしまうんです。

CSSでブレークポイントごとに縮小したり、オブジェクトの配置を変えたりする必要があるんですよね

これらのフォーマットが結構面倒です。

そこで、このAdobe MuseCCを使い、そのわずらわしさから解放されようってわけです。

ただ、自動でHTML等が書き出されるので、無駄が多いのは承知。

それでも作業が早く、ワイヤーを作ったり、とにかく速攻でアップする場合は使いやすい。

これでテストして、Dreamweaverで再コーディングしてあげればいいのかな。

カンタンに言うと、イラレやフォトショでやってたワイヤーをこれでやるとそのまま仮アップまで行けてしまうってことだね。

せっかくなんで、レスポンシブのブレークポイントを設けてきっちりレイアウトするようにしてみる。

LP程度の作成しかしない場合、Bootstrapのグリッドシステムフル活用のサイトと見た目変わらず出来ますしね。

 

ページをデザインしたらスクラバーで様々な画面サイズをプレビューできます。オブジェクトのレイアウトがiphone nとn puls、タブレット、PCの幅に合わせてCSSで変更していたことが、ブレークポイント追加でできます。

ブレークポイントって?

さまざまな幅をピクセル単位で示し、異なる幅でデザインし、幅をかえてオブジェクトがどのように反応するのかをテストします。ここで崩れたら、このブレークポイントで修正することでピッタリとはまります

では、Adobe先生に何ができるか聞いてみよう!

  • オブジェクトの表示/非表示:
    PCでは表示させ、スマホでは表示させないと言った場合に対し使う
  • ブレークポイントごとにオブジェクトの位置を変える:
    PCでは横に並べて、スマホでは縦に並べると言った場合に対し使う
  • レスポンシブ固定を使用する:
    どのオブジェクトを静止にして、どのオブジェクトを可変にするかを決定できます。静止オブジェクトがすべてのブレークポイントで同じ位置に留まるように固定できます。
  • オブジェクトのサイズ変更:
    オブジェクトをブレークポイントごとに異なるサイズにできます。また、ページの幅に基づいてオブジェクトのサイズが自動的に調整されるように設定することもできます。
  • さまざまなブレークポイントに合わせたテキストのフォーマット:
    ブレークポイントごとにテキストのフォーマットを変えることで、さまざまなブラウザー幅でテキストの見やすさと読みやすさを向上させることができます。

初心者ご用達というよりデザイン先行型の人がコーディング難しっすって時に、使うように作ったみたい。コーディングできる人はデザインはいまいち、デザインできる人はコーディングがいまいち。ま、プロなら特化するのは当たり前でハイブリッドにはならないわけよ。デザイナーが発注する場合、そのデザイン性が崩れるのが嫌で自分で作りたい、また、予算的に難しくコーディングを外注ではなく内製で本番サイトまでワンオフで構築したい場合に活躍しそう。もともとイラレやインデザインのスタッフが作っているようなので、そういう需要狙いって事なのねw

 

2017年07月22日

2017年07月20日

動的検索広告(DSA)の運用 Vol.2【居候日記NO.5】

「動的検索広告(DSA)の運用について Vol.2

 パラメータークエリってどないすんねん」

先週、佐渡島までカブで行ってきたkousakusanです。

総走行距離 436+229+336+171=1172kmで燃費計算すると、

70km/Lで、2000円でしたw

そんな事を考えて、仕事していると

そういえばDSAのパラメーターってどうやってつけるのよって思った。

http://www.buy-the-way.jp/wp/wp-admin/post.php?post=268

これの?より前の部分がドメインまでは固定で、ドメインから?までは動的なのよね。

そうなると、?以降をくっつければ良いじゃんって事になるんだけど、どうすればいいの?

実は、DSAだろうが、なんだろうがAdwordsには「キャンペーンの URL オプション(詳細設定)」がある。
ValueTrack パラメータを活用。

これを活用することで可能となります。

例: http://www.trackingc.com/?url={lpurl}&id=5

これが曲者で、この例では私は理解できなかったのです。(残念)

でも、いちいちフィードに全ページ入れるのって動的の意味ねえじゃんって事で探ってみた。

で、「{lpurl}?post=268 」と入力して「テスト」すると・・・

トラッキング テンプレート
{lpurl}?post=268 (キャンペーン単位)
最終ページ URL
http://www.buy-the-way.jp/wp/wp-admin/post.php(広告単位)
使用される属性
{lpurl}:http://www.buy-the-way.jp/wp/wp-admin/post.php(広告単位)
クリック URL
http://www.buy-the-way.jp/wp/wp-admin/post.php?post=268
注記
このテストでは AdWords のポリシー違反の確認は行われません。 詳細

ここね

クリック URL
http://www.buy-the-way.jp/wp/wp-admin/post.php?post=268

出来てるね。

{lpurl}は、事前に設定した最終ページURLです

これで、無事に掲載することが出来ました。

?の後ろも変えたい・・・だと・・

そんなん、次回やでw(エセ関西人)

2017年07月20日

2017年07月14日

動的検索広告(DSA)の運用 Vol.1【居候日記NO.4】

「動的検索広告(DSA)の運用について」

いやいや、佐渡島までカブで行ってきたkousakusanです。

総走行距離 436+229+336+171=1172kmをカブにキャンプ道具積んで、いって来ましたわ!

ものすごく綺麗で、梅雨なにの晴れて最高でした。

で、そんな素晴らしい夏休みが終わって非日常に戻ってきて、「ふ」と考えたのです。

動的広告ターゲットでページフィードを使うことで、特定のページを動的に最終ページURLに指定できいるのだが、

じゃ、そのLPに合った広告文を考えたいのにどうすればいいのよ?と思ってました。

ま、作っていくとだんだんわかる事なのだが、広告グループを作るときにこれやんケ!と思ったのでココに書いておこうw

「ターゲティング ソース: 自分のページフィード((1 件のページフィード, hogehoge.jp))のみを使用する」
の下に四角囲まれた3種類の内容がある。

※ページフィードのカスタムラベルをターゲットに設定する
※すべてのウェブページをターゲットに設定する
※特定のウェブページをターゲットに設定する(詳細設定)

これの「ページフィードのカスタムラベルをターゲットに設定する」を開いて、「このカスタムラベルを使用:」にターゲット名を入れればよかったのだ

例えば、法人用のLPを指定したい場合、フィードの「このカスタムラベルを使用:」に「法人」と入れて設定し、広告グループ作るときに「ページフィードのカスタムラベルをターゲットに設定する」で「法人」を指定してあげればLPを指定できる。

これで、きっちりとセグメントできるって事で、あとの設定は皆さんよろしくっとww

 

この記事は、づづくで!

2017年07月14日