ノーコードでWEBサイト制作

最近、ノーコードでWEBサイトが制作できる「STUDIO」というサービスを良く目にするようになり、クラウドワークスやランサーズといったマッチングサービスでも「STUDIO」での制作を希望される案件を見かけるようになりました。ちなみに、ここで言うノーコードとはHTMLやCSSでコーディングせずにWEBサイトを制作できるという意味になります。

そこで、以前ご紹介したサンプルサイトを早速STUDIOで制作して実際にノーコードでWEBサイトが制作できるのか、何が出来て何が出来ないのかを検証してみました。

まず、以下が以前制作したサンプルサイトのスクリーンショットです。

テンプレートデザイン004

そして以下が今回STUDIOを利用して制作したWEBサイトのスクリーンショットです。実際のサイトはこちら

ご覧のとおり、かなり忠実にデザインを再現することができます。さすがにノーコードということで細かいが制御が出来なかったり、開閉式のアコーディオンなどを利用できない、flex-directionのリバースが使えない、transformでの回転が使えないなどの制限はありますが、レスポンシブ対応でマウスオーバーでのアニメーション効果が使えるなど、コーディングなしでここまで作れるのは凄いと感じました。そしてなんと無料で利用できます。独自ドメインの利用などは有料プランが必要ですが、LPやイベントの告知用のWEBサイトなどスピーディーに公開したいWEBサイトやスタートアップ企業のコーポレートサイトや新商品のティザーサイトなどにも利用できそうです。

ただ、ノーコードとはいえ、やはりそれなりの難しさはありますので、全くWEB制作の経験がない方は無料で利用できるテンプレートをひな型にして制作する方がよいかもしれません。

WEB制作のワークフローからコーディングが不要となるため簡単に素早く制作ができるのは事実ですが、しっかりしたWEBサイトを作るには、デザインしながらHTMLの構造を意識しつつ制作するという今までにない感覚があり、それなりに慣れが必要だと感じます。そもそもAdobe XDでデザインする際もある程度はHTMLの構造を意識しながら制作しますが、STUDIOではデザインとコーディングを頭の中で同時進行している感覚になります。

ある程度オリジナルのテンプレートや再利用できるコンポーネントを作っておくことで高品質かつスピーディーに制作ができそうですので、今後ニーズがあればSTUDIOでの制作案件も受注してみたいと思います。

WEBアプリUIUXサンプル

業務用WEBアプリのUIUXのデザインサンプルです。
Adobe XDを使用して制作。構成要素の解るワイヤーフレーム等の資料をご提供頂けますと、インターフェイスを設計しモックアップやプロトタイプを制作させて頂きます。詳しくは問い合わせフォームよりお問い合わせください。

DreamweaverのGitHubパスワード

dreamweaverとgithub

DreaweaverからGitHubでリポジトリ管理をしている方は多いかと思いますが、GitHubの仕様変更に伴い、これまでリモート管理で利用していたパスワードが使えなくなっています。随分前からGitHubからアナウンスがあったため対応済みの方もいらっしゃるかと思いますが、まだ対応していなくてpush時にエラーになって焦っている方もチラホラいらっしゃるようですので、対応方法をご紹介します。

(1)GitHubにログインし、画面右上のアイコンからメニューを開き「Setting」を選びます。

(2)画面 左 側のメニューから「Developer settings」を選びます。

(3) 画面左側のメニューから「Personal access tokens」を選びます。

(4) 画面右上の「Generate new token」をボタンをクリックします。

(5) 「Note」欄には後から何のアクセストークンなのかが分かるように任意でメモを入力しておくと良いでしょう。案件ごとに使い分ける場合は案件名、全案件共通で使うなら「Dreamweaver用」などとしておきます。

(6) 「Expiration」にはアクセストークンの有効期限を指定します。セキュリティを高めるために頻繁に変更する場合は短め目の期限にし、特に期限を設けない場合は「 No expiration」にします。

(7)「Select scopoes」では用途に応じて権限を指定しますが、ここでは「repo」にチェックを付けます。

(8)画面の一番下にあるグリーンの「Generate token」ボタンをクリックして設定を完了させます。

(9)薄いグリーンの部分に新たに生成されたアクセストークンが表示されますので、コピーアイコンをクリックしてアクセストークンをコピーしておきます。この画面を閉じると後からはアクセストークンを再表示できませんので、必要があればテキストファイルなどにしてローカルに保存しておきます。

(10)DreamweaverのGitパレットから「リモートを管理」を選びます。

(11)最後に「パスワード」 欄 に先ほどコピーしておいたアクセストークンをペーストして「完了」ボタンをクリックして終了です。

【参考URL】https://docs.github.com/ja/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

ダッシュボードUIUXサンプル

ダッシュボードのUIUXのデザインサンプルです。
Adobe XDを使用して、構成内容やページ遷移を視覚化したワイヤーフレームやフロー図制作、実機でのUXテストが可能なプロトタイプ制作、細部までデザインを入れ込んだモックアップ制作まで、プロジェクトのニーズに合わせてご提供いたします。

アプリUIUXサンプル 002

アプリのUIUXのデザインサンプルです。
Adobe XDを使用して、構成内容やページ遷移を視覚化したワイヤーフレームやフロー図制作、実機でのUXテストが可能なプロトタイプ制作、細部までデザインを入れ込んだモックアップ制作まで、プロジェクトのニーズに合わせてご提供いたします。

アプリUIUXサンプル 001

アプリのUIUXのデザインサンプルです。
Adobe XDを使用して、構成内容やページ遷移を視覚化したワイヤーフレームやフロー図制作、実機でのUXテストが可能なプロトタイプ制作、細部までデザインを入れ込んだモックアップ制作まで、プロジェクトのニーズに合わせてご提供いたします。

テンプレートデザイン004

ご要望の多かったテンプレートを利用した制作を開始いたしました。
デザインは随時こちらのブログにてご案内してまいります。テンプレートですのである程度レイアウトのフォーマットは決まっていますが、画像やテキストを変えるだけで雰囲気は大きく変わりますし、カスタマイズも可能ですのでお気軽にお問合せください。
もちろんテンプレートを利用することで制作期間を大幅に短縮できるとともに制作費もリーズナブルになります。

「004」は1ページ完結のシングルページのテンプレートになります。スタイリッシュかつエレガントなデザインになっていますのでジュエリーやウェディング、サロン関連のWEBサイトやLP(ランディングページ)に最適です。複数ページへの展開も可能ですので詳細はお問い合わせください。
こちらはWordpressを使わずに通常のHTMLのみで制作いたしますので、よりスピーディーに制作が可能です。テキストや写真の原稿が揃っている状態ですと最短24時間で納品が可能です。

お問い合わせはこちら

テンプレートデザイン004

テンプレートデザイン003

ご要望の多かったテンプレートを利用した制作を開始いたしました。
デザインは随時こちらのブログにてご案内してまいります。テンプレートですのである程度レイアウトのフォーマットは決まっていますが、画像やテキストを変えるだけで雰囲気は大きく変わりますし、カスタマイズも可能ですのでお気軽にお問合せください。
もちろんテンプレートを利用することで制作期間を大幅に短縮できるとともに制作費もリーズナブルになります。

「003」は1ページ完結のシングルページのテンプレートになります。スタートアップ企業や開業準備中のコーポレートサイトやLP(ランディングページ)に最適です。もちろん複数ページ展開も可能ですので詳細はお問い合わせください。
こちらはWordpressを使わずに通常のHTMLのみで制作いたしますので、よりスピーディーに制作が可能です。テキストや写真の原稿が揃っている状態ですと最短24時間で納品が可能です。

お問い合わせはこちら

テンプレートデザイン003

テンプレートデザイン002

テンプレートデザイン002

ご要望の多かったテンプレートを利用した制作を開始いたしました。
デザインは随時こちらのブログにてご案内してまいります。テンプレートですのである程度レイアウトのフォーマットは決まっていますが、画像やテキストを変えるだけで雰囲気は大きく変わりますし、カスタマイズも可能ですのでお気軽にお問合せください。
もちろんテンプレートを利用することで制作期間を大幅に短縮できるとともに制作費もリーズナブルになります。

「002」はコーポレートサイト向けのWordpress用テンプレートになります。インテリジェンスで信頼感のある印象のあるデザインが特徴となっています。 業種・業態を問わない汎用性の高いテンプレートです。

お問い合わせはこちら

テンプレートデザイン001

ご要望の多かったテンプレートを利用した制作を開始いたしました。
デザインは随時こちらのブログにてご案内してまいります。テンプレートですのである程度レイアウトのフォーマットは決まっていますが、画像やテキストを変えるだけで雰囲気は大きく変わりますし、カスタマイズも可能ですのでお気軽にお問合せください。
もちろんテンプレートを利用することで制作期間を大幅に短縮できるとともに制作費もリーズナブルになります。

「001」はクリニック向けのWordpress用テンプレートになります。デモサイトは歯科医院になっておりますが、さまざまなクリニックに対応可能です。シンプルかつ清潔感のある見やすいデザインが特徴となっています。

お問い合わせはこちら

テンプレートデザイン001

WEBサイトをリニューアルしました

ひさびさにWEBサイトをリニューアルし、白を基調としたクリアなイメージのデザインに仕上げました。
閲覧するデバイスによって表示が最適化されるレスポンシブ仕様になっています。最近はすっかりレスポンシブ対応するのが標準仕様となっており、だいぶ一般にも浸透したように思います。
CMSとしてWordpress5を使用していますが、Wordpress4から大きく仕様が変わった部分があり、テーマによっては上手くコンテンツの更新できないようになってしまったものもあるようで、今回はバージョン5に完全対応させました。

Googlemapは正常に表示されていますか?

WEBサイトにGooglemapの地図を利用されている企業様は多いかと思いますが御社のWEBサイトの地図は正常に表示されていますか?
意外と自分の会社のWEBサイトの地図が埋め込まれているページを見る機会は少ないかと思いますので、この機会に確認してみてはいかがでしょうか?
2018年6月11日以降、Googleの地図サービスが刷新されたことにより「このページでは Google マップが正しく読み込まれませんでした。」とエラーになっているページが散見されるようになりました。

理由は以下の3つ。

  1. APIキーを利用していない場合
  2. APIキーを利用しているが、無償枠「月間28,000マップロード」を超えた場合
  3. 請求先アカウントの登録がされていない

ちなみにiframeを使って地図を埋め込んでいる場合は今回のケースには当てはまらないためセーフとなりますので、エラーが出ているようでしたら、これを機にiframeの埋め込みに変更するのも手かもしれません。

Bootstrap 4で変更になったhiddenとvisible

Bootstrap3からBootstrap4に移行してもっとも戸惑ったのがブレイクポイントごとに表示・非表示を制御するhiddenとvisibelが使えなくなってしまった点。
以下に変更後にどのようになったかをまとめてみました。正直、以前の方が分かりやすかった気がします。

  • .visible-xs-{display} ⇒ .d-{display}.d-sm-none/.d-{display}.d-md-none
  • .visible-sm-{display} ⇒ .d-none.d-md-{display}.d-lg-none
  • .visible-md-{display} ⇒ .d-none.d-lg-{display}.d-xl-none
  • .visible-lg-{display} ⇒ .d-none.d-xl-{display}
  • .hidden-xs ⇒ .d-none.d-sm-{display}/.d-none.d-md-{display}
  • .hidden-sm ⇒ .d-{display}.d-md-none.d-lg-{display}
  • .hidden-md ⇒ .d-{display}.d-lg-none.d-xl-{display}
  • .hidden-lg ⇒ .d-{display}.d-xl-none

{display} の種類が block, inline, inline-block の3種類から block, inline, inline-block, table, table-cell, table-cell, flex, inline-flex の9種類に増加
※以下のサイトを参考にさせて頂きました。
http://cccabinet.jpn.org/bootstrap4/utilities/display