レスポンシブWebサイトのプロトタイプ作成に便利な「Pingendo」が新しくなったので使ってみた(Bootstrap)

Pingendo4

https://pingendo.com/v4-beta/


PingendoというBootstrapサイトのモックアップ作成ツールがあった事を思い出してサイトへ行ってみたらバージョン4が出ていたので使ってみました。

以前よりもっと簡単な操作でモックアップHTMLが作れるようになりました。
サイトのモックアップツールとしてPingendoがいいと思う点は以下の機能です。

(1)Font-AwesomeのWebフォントが使える

image

(2)ボタンやテキストの色を右のメニューから変更できる($brand-primaryなどブランドカラーを選べる)

image

(3)コンテンツやテキストの上下の隙間(マージン、パディング)の調節が右のメニューから変更できる

image

(4)左のメニューから画像、スライド画像(JS)、地図、テーブル、Bootstrapで使用できるコンポーネントを選んでドラッグ&ドロップで設置できる

image

今受けてる案件のレスポンシブwebデザインのLPに使用しようとしましたが、前に書いたBootstrap3のコードはPingendo4で使えなかったので案件で使用するのは断念しました。

Bootstrap3で書いたコードをBootstrap4向けに変更しようと思ったら無駄にコーディング時間が取られると思いました。


私の場合は下記のPingendo3でHTMLのモックを作った方がいいと思いました。

https://pingendo.com/


案件ごとにゼロからオリジナルCSSを制作しようとするとデバイス表示確認とコーディングに時間がかかるので制作費のことを考えると現実的ではないと感じています。

私はBootstrapにないパーツをオリジナルCSS(SCSS)で追加してWebサイトのコーディングをして時短化を図っています。

Bootstrapでそのまま使えるデザインはそのままにして、変更が必要な部分だけ自分でCSSで作成するカスタマイズ的な手法です。

レスポンシブサイトの場合はPCとスマホで可変するという仕組みがWeb素人であるクライアントに伝わりにくいのでワイヤーフレーム作る段階でなるべくプロトタイプHTMLを見せた方がいいと考えています。

レスポンシブWebサイトのプロトタイプ作成に便利な「Pingendo」が新しくなったので使ってみた(Bootstrap) Pin…







TumblrからWordPress移行作業とWordPress初期設定に導入したプラグイン【MEMO】

自分が運営している素材サイトをTumblrからWordPressへ記事を移行して以下のプラグインを導入したのでメモします。

WordPressプラグイン

  1. All in One SEO Pack(サイトマップ生成、Googleウェブマスター、アナリティクスのSEO基本設定)
  2. PubSubHunbub(新着記事を早く検索エンジンに伝える(コンテンツ盗用コピーサイト対策))
  3. EWWW Image Optimizer(画像ファイルサイズ圧縮)
  4. Jetpack by WordPress.com(ソーシャル連携)
  5. WP Super Cache(キャッシュ系プラグン)
  6. 001 Prime Strategy Translate Accelerator(キャッシュ系プラグン)
  7. Tumblr Importer(Tumblr ブログから投稿をインポート)
image
image
Google AdSense公式プラグイン

Google AdSense広告掲載するために下記のプラグインも使用しました。

下記のGoogle AdSenseのプラグインで広告を追加したい任意の場所をクリックするのみで設置可能です。

プラグイン設定して1日後に広告が設置されました。

image
image
TumblrからWordPressサイトへ誘導する

最後にTumblrサイトからWordPressサイトへURLが変わってしまったので下記のようにTumblrテンプレートのhead内にJavaScriptで新しいサイトURLへ飛ぶようにしました。



TumblrはPHPもhtaccessも使えないのでJSで新しいサイトへ誘導するしか方法がないので応急処置的にJSで対応しました。検索が少ないサイトで一からサイトを作り直す状態ならこれでも問題ないかと思っています。




▼参考サイト

TumblrからWordPressへのBlog移設

▼参考書籍

WordPressサイト運営に役立つプラグインが紹介されています。

TumblrからWordPress移行作業とWordPress初期設定に導入したプラグイン【MEMO】 自分が運営している素材サ…




クラウドワークスで3日営業日以内に報酬が振り込まれる「クイック出金」を試してみた


クラウドワークスで新機能?「クイック出金」を試しに使ってみました。使い方がよくわからなかったのでメモします。

(1)初期の状態では随時出金方式が選択されていますが、これを「①キャリーオーバー方式」へ変更します。次に「②出金可能な報酬を全て出金申請する」をクリックします。

image

(2)振り込み予定日が下記のように変更されました。これで申請日から3営業日以内に振り込まれるはずです。


image

2月のクラウドソーシングの収入は多めでした。

■クラウドワークス

手数料引いた後の報酬金額:257,020円

案件内容:キャラクターデザイン、Webサイトデザイン4ページ(コーディングなし)

■ランサーズ

手数料引いた後の報酬金額:113,400 円

案件内容:ランディングページ1ページのデザイン・コーディング(レスポンシブ)、既存WordPressサイトの下層ページへ設置(組み込み・カスタマイズなし)

合計:370,420円

銀行手数料差引後:369,420円


他、1月30日にランサーズから前回ランディングページを受注した事がある大手のIT系会社さんから LP制作109,000円を受注されました。

その会社の別部署からもLP制作の相談が来ているので3月中旬までで確定しているのは約18万円くらいです。

2月末と3月中旬の売り上げが合計55万円超えました。

去年はクラウドソーシングでは月39万円が最高でしたが、更に今年は上へ上がりそうな気はしています。

クラウドワークスは今後使っていくかどうか未定だけど(今回のような高額案件があれば応募するかも) 今のところはランサーズのみで十分なくらい案件がよく取れます。

まぁ、クラウドソーシングも世間で言うほど悪いものではないかと思いますけどね。

自分がしっかりと契約結んでいれば安く叩かれることもないはずです。

クラウドソーシング関係なく低単価案件は直接の案件でもよく相談されますし、単価に不満があれば断ればいいかと思います。


▼フリーランス受発注の基本については下記の本が大変参考になります。

クラウドワークスで3日営業日以内に報酬が振り込まれる「クイック出金」を試してみた クラウドワークスで新機能?「クイック出金」を試…


よくJavaScriptコンテンツでレンダリングがうまくいかないと言ったケースがあり、そのまま順位に影響してしまう事があるという情報がネット上でささやかれていますが、果たして本当なのでしょうか? 徘徊防止LYKAONのリ

JavascriptコンテンツのSEO評価について



今回、Yahoo!のみ検索結果のインデックス数が異なる問題について対処方法を調べる中で、ジェネリックトップレベルドメイン(.comや.info等の世界中誰でも取得が可能なドメイン)を扱うWebサイトに対して、インターナシ

Yahoo!の検索結果にインデックスされない場合の対処法




WebサイトをMacへ丸ごとバックアップできるMacアプリ「SiteSucker」

Web関連の仕事してる人なら既に周知のアプリとは思いますが。

WordPressサイト、コーポレートサイトの下層ページ制作の案件で私が使用しているサイトの丸ごとバックアップができるMacアプリ「SiteSucker」を紹介します。

Web制作を始めた3年くらい前から使用しているアプリです。

使い方は超シンプルです。

(1)「SiteSucker」のアイコンをクリックすると下記のような画面が開くのでサイトのURLを入力してEnterを押します。たったこれだけの作業です。  

image

(2)「ダウンロード完了」の通知が出たら下記のようにファイルが作成されます。 

image

現在は600円で販売されているようです。(2017年1月30日現在) GoogleやFirefoxにもサイトを丸ごと保存する機能はありますが、実際のサイトのファイル階層を忠実にコピーできるのは「SiteSucker」だと思います。


自サイトのバックアップには最適ですが、機能が機能なだけに悪用厳禁のアプリですね。 


「SiteSucker」をダウンロードする
https://itunes.apple.com/jp/app/sitesucker/id442168834?mt=12

WebサイトをMacへ丸ごとバックアップできるMacアプリ「SiteSucker」 Web関連の仕事してる人なら既に周知のアプリ…




私がIllustratorをWeb/UIデザインで使う理由をあげてみた(2017年版)


私がIllustratorをWeb/UIデザインで使う理由をいくつかあげてみました。

  1. 画像を「リンク」で配置できる
  2. Photoshopのようにレイアウトすると写真が荒くなったりしない(解像度に依存しない)
  3. 文字スタイル、スウォッチ、グラフィックスタイルの機能がCSSの考え方に似ているからHTMLに置き換えてサイト構造を考えやすい
  4. CSSプロパティでCSSのスタイルをコピペできる(CC以降のバージョンから可能)
  5. SVGデータでイラストやアイコンが作りやすいのでRetina対応しやすい(元データより2倍、3倍の大きさの画像の書き出しができる)
  6. 共通のデザインパーツをシンボル化(ショートカット:F8)で可能なので、デザインの修正変更に強いデータ作りができる
  7. イラストやロゴデータは外部リンク(AI形式)としても配置できるので画像の変更があれば全体のWebデザイン全体の画面データ(AI)を開くと自動修正されて更新される
  8. 制作したSVG(ベクターイラスト)画像とFlashは相性が良いのでアニメーションが作りやすい

Sketchでできる事はIllustratorでもできるし、ベクター画像の品質に関してはIllustratorの方が機能が上なので基本的に私はWebデザインの仕事ではIllustratorを使います。

PhotoshopはスマホサイトのRetina対応時のデータの肥大化が半端でないような?気もしますし。 PCのメモリを沢山積んでおかないとPhotoshopでデザイン作業は厳しく感じました。(私が所有してる8GBのiMacで動作がのろくてキツイ感じです)

ゲーム、アニメ系の業界はPhotoshopでUIデザインするのが主流のようです。 重厚感のある立体的なデザインを求められる業種はPhotoshopの方が求められている事が多いです。

ネットショップでも楽天の縦長ランディングページとか未だにPSDデザインが主流です。


普通の一般の会社だとIllustratorで作成するフラット系デザインでもWeb/UIデザインは問題なく作成できると思っています。

あとはWeb制作会社のコーダー、エンジニアさんがIllustratorを使う事ができればデータのやり取りで問題ないのですが‥。Illustrator納品不可な所も多いらしくコーディングを外注する場合はPSD納品が求められる事が今でも多いようです。

会社員Webデザイナーになると基本PhotoshopでWebデザインする事を求められると思います。Sketchを使うのは自社でアプリ開発制作してる会社くらいだと思います。


私はデザインのみ制作された場合でコーディングはクライアント側で対応してもらう場合にPhotoshop納品必須だとIllustratorで主なデザインを作成して最後にPSDで書き出して納品します。 そうやって今まで対応してました。

Illustratorを使うのは1番にAdobeソフトでPhotoshopとも互換性があるからです。 Sketchは他社のアプリなのでAdobeソフトで作られたデータと互換性はありません。 日本語用に作られたAdobeソフトの方が文字周りの機能は安心できます。

もともとWeb用のソフトではないので選択肢としてベストではないのでしょうけど(それはPhotoshopも同じ)PhotoshopよりIllustratorの方がWeb/UIデザインはしやすいと思っています。



▼IllustratorをWeb/UI/CMSデザインに使用しているデザイナーさんのサイトが参考になります。

▽WordPressでIllustratorでデザインしてテーマ開発するという内容が気になりました。 私もCMSとBootstrapとIllustratorは相性がいいと感じています。

「WordBench奈良でAdobe Illustratorによるテーマ開発についてお話してきました」

https://www.cherrypieweb.com/weblog/technical/20161122040658.php


▽Illustratorでデザイン作業するとき、三階ラボさんのスクリプトにはいつもお世話になっています。 IllustratorでWeb/UIデザインする前例というかお手本ですね。 常に効率化を考える姿勢は素晴らしいです。

「Adobe Illustratorの自作スクリプトを公開し続ける株式会社三階ラボのスタンス」

https://bulan.co/swings/3flab-inc_interview/

私がIllustratorをWeb/UIデザインで使う理由をあげてみた(2017年版) 私がIllustratorをWeb/UIデ…




  1ページのタイトルに数多くのワードを列挙し、テーマの異なるコンテンツを掲載したウェブサイトを見かけることがあります。   多くのワードで集客したいとの意図は理解できますが、このような設定をしてしま […]

対策ワード選びのセオリーは1ページ1ワード


弊社では対策を承った際、まず初めに「内部最適化ご提案書」を作成しています。 titleやdescription、hタグなどの主要タグの問題点抽出と改善提案をはじめ、サイト構成やhtml表記に関する事項、コンテンツに関する […]

URL正規化・canonical属性の仕組みと使い方(1)