レスポンシブサイトを簡単に作成できる無料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…