レスポンシブサイトを簡単に作成できる無料Webオーサリングツール紹介

(1)Pingendo 4

http://pingendo.com/desktop.html


Bootstrapサイトを簡単に作成できるWebオーサリングツール。

最近、主流の1ページの縦長サイトなどLPのワイヤー、プロトタイプを簡単に作りたい時に便利です。

テンプレートは2種類選べます。

個人的にはオレンジのテンプレートの方がナビと画像にエフェクトのアニメーションついてるからサイトがリッチな感じに見えておすすめです。

私の場合はデザイン作りこむ前に画像と文章のみをレイアウトして作るモックアップとして使う時が多いです。

BootstrapのHTMLモックアップ、ワイヤーフレームが欲しいと思った時はPingendo使います。


(2)Macaw

http://macaw.co/

最近、他の人のブログ記事で知ったのですがMacawというWebオーサリングツールもあります。

少し使ってみましたが、JSとか動きのない静的なレスポンシブサイト作成には使えるとは思います。

ページ数の少ない静的サイト向きという印象です。

パパッと画像と文章をレイアウトするだけでサイト作れるしHTML/CSSコードが生成されます。 かつてAdobeで開発されていたレスポンシブサイト生成ソフトEdge Reflowと操作が似ています。

生成されたHTML/CSSは後で編集可能でした。

Adobe MUSEもコーディングなしでサイトが作れることが有名ですが生成されたコードは後から編集不可なくらい汚いという欠点があります。

Macawなら割と綺麗なCSSを吐いてくれます。

対応ブラウザが公式サイトに掲載されてないと思うのでサイト公開前には自分で各ブラウザチェックをする必要がありそうです。


Web制作はブラウザチェックや検証に時間かかる場合もあるので、私は簡易的にレスポンシブなモックアップサイト作るならPingendo 4がいいかなと思います。

Bootstrapなら既にフレームワーク開発側が動作確認済なので細かいブラウザチェックと実機確認を自分でする必要がありません。

BootstrapはCSS重いといわれるけど使わないWebパーツはSCSSで「//」を入れるだけで容量削減できます。

レスポンシブサイトを簡単に作成できる無料Webオーサリングツール紹介 (1)Pingendo…






Photoshopのwebデザインを効率化するエクステンションの紹介(CC 2017)

Photoshopエクステンション 拡張機能 GuideGuide

https://guideguide.me


最近、有料化されてしまって諦めていましたが「Try GuideGuide for free」リンクからフリー版のダウンロードが可能でした。

Photoshopで手作業でガイドを引くのは面倒なのでGUIDEGUIDEがあると自動でガイドを引いてくれるのでWebデザイン制作には便利です。

Photoshopエクステンション 拡張機能 Bootcomp2.0

http://dearps.lovwar.com/bootcomp/

新しくなったBootcomp2.0の使い方

2.0になってから画像に連番で名前をつけると100枚くらいあっても自動で挿入できるようになったようです。

デザインはPSD納品がまだまだ多いのでBootcompみたいに自動でレイアウトできるようなエクステンションがあると助かります。

Bootstrap案件以外のデザイン制作にも使えると思います。

Photoshopエクステンション 拡張機能 Ink

http://ink.chrometaphore.com/

外部のコーダーにデザインを渡す時にオブジェクトを選択すると自動でスタイルガイドを作成してくれる便利なエクステンションです。

デザイナーが使うとデータの共有が楽になりそうです。

以前、Webデザイン案件で使用した事があります。

クライアントの会社のコーダー・エンジニアにスタイルガイド付きのPSDカンプを納品する必要があった際に使用しました。


自分でコーディングする場合は必要ないですが、外部の人にコーディングしてもらう時にはスタイルガイド的なものはあった方がよさそうです。

最近のAdobeはCreative Cloud ExtractのサービスがあるのでPSDカンプ納品の際はスタイルガイドを求める事は減ってきているような気がします。

http://codezine.jp/article/detail/8493


Photoshopの場合はBootcompなどのエクステンションを入れてようやくWebデザインで使いやすくなる印象です。

エクステンションのなかった時代からWebデザインしていた先人のデザイナー達は相当苦労してたんだなとは思います。

結局の所、Photoshopでwebデザインしたとしてもイラストやアイコン素材はIllustratorで作成してPhotoshopへ貼り付けてるんですけどね。。。

PhotoshopとIllustratorの両方を使わないとWebデザイン制作はできないような気はします。
だから両方使いこなせるようになっておかないとなと思います。


参考サイト
http://coliss.com/articles/build-websites/operation/design/photoshop-extension-guideguide.html
http://coliss.com/articles/build-websites/operation/design/photoshop-specs-generator-ink.html

Photoshopのwebデザインを効率化するエクステンションの紹介(CC 2017) …


サイト運用の施策として「UI」と「SEO」を改善することが必要であるとしたら、どちらをどれだけ重要視し、どのように優先順位を付けていけばよいのでしょうか?様々な観点から結論付けてみました。

どっちを取る??UIとSEO








Tumblrが気が付いたらGoogle AMP対応していた件

Tumblrが気が付いたらGoogle AMPに対応していました。


テーマの編集→詳細設定画面へいくと「Google AMPを有効にする」が追加されていました。

image

スマホで確認すると最近更新した記事ページだけAMPマークが表示されていました。

image

Tumblrは無料SNSブログなのでAMP対応もサービス提供側が勝手にやってくれるので楽ですね。

WordPressへ移行してAMP対応ブログを自作するのは結構大変みたいですし。

AMPに対応する利点については下記のサイトが詳しく書かれています。


モバイルページの高速化!AMPの利点と対応HTMLの作り方

https://ics.media/entry/12291


基本的にHTML5の記述でページ制作できるのですがAMP HTMLには使用できるタグに制約があります。

静的HTMLサイトでゼロからAMP対応ページ作ることは少なく、大抵はWordPressのプラグイン使って記事ページのみAMPに対応させることが多いのかと思います。

ブログはTumblrで管理する方がWordPressで管理するよりは数倍楽だとは感じています。 テーマのデザインさえ用意すればメンテフリーでブログが持てます。

WordPressは多機能だけどプラグインがゴテゴテついているので配布元プラグインが不具合起こした時の修正作業が大変です。

自分のサイトでそういうのを管理するのが嫌でTumblrへ引っ越しました。

Tumblr使う上での難点はAMP対応だったのですが対応してくれていたので時代に取り残されることはなさそうです。

Tumblrが気が付いたらGoogle AMP対応していた件 Tumblrが気が付いたらGoogle…




A/Bテストとは Webサイトからの反響をさらに増加したいと思われたことはないでしょうか? サイト改善には、仮説と検証を繰り返す必要があります。 仮説が正しいかどうかを判断できれば、有効にサイト改善をするために有効とされ

サイト改善に必見のA/Bテストについて




今年もAdobe CCの購入先はデジハリのAdobeマスター講座を選んでみた

Adobe CCの期限切れの通知メールがAdobeから届いた

とうとうこの日が来てしまった、と思う瞬間でした。
期限切れの日はわかってはいたのですが なるべく支払いは後回しにしたかったので先延ばしにしていました。

image

今年はAdobe CCはどんなルートで購入しようかな?と考えました。
Adobeの公式サイトの価格を調べてみましたが現在は20%OFFキャンペーンをしているようです。

https://www.adobe.com/jp/creativecloud.html

20%では微妙にお買い得感はないので購入の選択肢からAdobe公式サイトは除外する事にしました。

到着に1週間〜10日くらい待たされてもデジハリのAdobeマスター講座が48%OFFなのでお買い得だと思います。

去年デジハリでAdobe CCを購入した人には下記のような件名の内容のメールが届くので内容に従ってリンクをクリックしてデジハリのサイトで購入手続きをすることにしました。

「【AdobeCC】今年も48%オフで、利用更新しませんか?/デジハリ・オンラインスクール」

卒業生はWebマーケティング編の動画講座が付いてくるようです。

Adobeマスター講座 『Webマーケティング編』

http://online.dhw.co.jp/course/adobe_master_m/

Adobe CC期限切れ後の宅配で届くまでの空白の期間はどうするのか?

私の場合は昔に購入したIllustrator CS4とPhotoshop CS4があるのでWeb系の画像制作は特に問題ないかなと思いました。

私はAdobe Animate CCが使えないくらいしか不便さは感じてないかもしれません。
これも頻繁に使うソフトではないし、今の案件では使用しないから助かりました。

古いソフトではWeb画像の書き出しがしにくい点が不便かなと思います。 スライスとか古い書き出し方法しか機能がなかったりします。

現在の新しいPhotoshopやIllustratorはアセット書き出し機能があるからWeb画像の書き出しは非常に楽になりました。

個人でデザインする人の場合は古いCSバージョンは予備として持ってた方がいいかもしれませんね。

Adobe CCは元が6万もして高額なので年間の維持費が安く済む所を選ぶのが賢い選択とは思います。


▼過去関連記事

Adobe CCをデジハリ・オンラインスクールで48%OFFで格安で購入してみた

今年もAdobe CCの購入先はデジハリのAdobeマスター講座を選んでみた ...