制作のおさらい

無理な案件は丁重にお断りする

2019-05-17

モンスタークライアントではないけれど
譲歩すればするほど
深みにはまってしまう案件があります。

お会いしたときの感じも、
いい感じ。

メールも丁寧。

でも。

無理な案件はお断りしましょう。

例えば。

納品期日に無理がある案件
自分の技術では到底できそうにないと判断されるもの(外注予定があればOK)
予算のない案件

ご迷惑をおかけする前に、お断るするのは大切です。
また、自分が苦しむのが見えている案件をお断るするのも大切です。

特に、予算のない案件。
必ず、何かしらヒトモメあります;

参考になれば。

SEO対策

2018-12-15

無料

①グーグルのウェブマスターツールに登録

WordPressで作成したホームページの場合、
・「Google XML Sitemaps」プラグインを有効化して グーグルのウェブマスターツールにて サイトマップを登録
・「PS Auto Sitemap」 WordPressで綺麗なサイトマップを自動生成してくれるプラグイン

②マイビジネスに登録

https://support.google.com/business/answer/3038063?hl=ja

③クロール申請

https://www.google.com/webmasters/tools/submit-url

最後になったけれど

ホームページのHTMLに記載の「metaタグ」や「h1」のタグなど、構成におけるマークアップなどは基礎的基礎ってことで、省略。

有料

急ぎの場合

グーグルアドワーズ 成果に基づくお支払い

https://www.google.co.jp/adwords/

htaccessがFTPで見えないとき

2018-12-15

オプションなどの環境設定>表示などで
書くし属性のファイル・フォルダを表示させる
の項目をチェックする
htaccessがFTPで見えないとき

「ロゴ」作るヒントやフォントメモ

2018-11-22

作り方ヒント

1文字だけフォントを変える。
もしくはすべての文字のフォントを1文字ずつかえる。
文字の切り離し。
文字に色をつける。周囲に色をつける。
欧米フォントなどを1度分解し、組み直して、日本語のタイトルロゴに。
イメージ(イラスト)の追加。
文字の一部をイラストで置き換える。
カラーのアクセント(一部に色をつける)
漢字をロゴマーク化してアクセントロゴにする。
マーク(イラスト)の中に文字。
文字のヌキ部にイラストなどを入れて彩る。
大文字・小文字関係なく統一して使う。
電話番号から。

イメージ

店名の頭文字を使用
羽ばたくイメージ
Wで咲く花をイメージ
やわらかい印象・元気さ・さわやかさ・謙虚さ
太陽の色・赤
青で水を象徴
造形文字で人がよりそう感じ iii
親しみさを強調するために、小文字で、とか。
手書き書体で親しみやすさを
ブラウザ上で見やすいカラーを使う(プライマリーカラー)
文字を右斜めにして、スピード感
1か所の色をかえて、チャレンジ間
たえず変化することをイメージして、グラデーション

よく使われるフォント

フォントは見た目で選んでOK
Futura(ルイ・ヴィトン)
Trajan(ゴディバ)
Sackers Goshic(ピエール・マルコリーに)
Nicolas Cochin(ディオール)
Dodoni(ファッション雑誌「VOGUE」)
Helvetica (世界でよく使われる)
Plantin(ロンドン)
Haratio(ダイソンに近いロゴフォント)
Bernhard Fashion(パリのカフェとか・・・手描きみたい)
Peignot
Optima nova Titling(ルーブル美術館)
Courier(タイプライターっぽさの演出効果)

無料で頼まれそうになったとき

2018-11-20

無料でのお願いを断るとき

私も食べていかないといけないので、その都度いただきますよ^^;
外注というカタチでご依頼くださいましたら、対応いたします。

無料で「教えて」というお願いを断るとき

教える内容にもよりますが、教えるということの「忍耐・体力」ともに侮ってはいけません。
結構な労力を伴います。

友だちや知人などから軽い気持ちで「word教えて」と言われた場合
これを読んでいるあなたが元気であればOKすると、とても喜んでもらえるのではないでしょうか?

そうでない場合・・・
私も食べていかないといけないので、そこに(教えることに)時間をとられるわけにもいかないんですよ~^^;

この「食べていかないといけないので・・・」というフレーズは、とある知人のフリーのアナウンサーが使ってたのを聞いて(そのとおりなんだよね;)と思うと同時に
相手も納得してくれるので、困ったときは使わせていただいてます。

そもそも

そもそも友だち・知人からの依頼は受けない方が賢明です。
友だち関係に仕事が入ってくると、大概において気まずくなります。

理由は、友だちや知人は「安くしてほしい」という思いがあり
仮に安くしても、(相場や事情を知らないため)費用以上の内容を要求してくることが多く、
すると、だんだん請け負った側のモやっと感が強くなり、
お互いの認識ズレから、次第にギクシャクしてきます。

ですので、友だちや知人からは受注しないのが一番ですが、どうしてもお願いされた場合は
相見積もりをとっていただき、相場を知ったうえでお願いしてもらうようにお願いするといいかもしれません。

困ったときのメール

2018-11-20

お支払がなかったとき

メール文章例

今、○月末締め処理をしているのですが、行き違いでしたら誠に申し訳ございません。
ご入金の閣員がまだとれてないのですが(翌月の)○日○曜日確認になりますでしょうか?

相手が理不尽なことを言ってきたとき

お客様はプロではなく、事情がよくわかってない上に
いろんな考え方、物事の捉え方の人がいます。そこを理解した上で同じ土俵に立たないこと。

コミュニケーションが大事です。
相手を立てて、制作側の事情を説明してわかっていただくという態度が大事です。

相手の言い分をたっぷりと聞き、相手が効く体制を作ってから
制作サイドの事情説明に入ること。

売り言葉に買い言葉になってしまっては、お互いに後味が悪いです。

こちらができることは、相手の気持ちを理解し、
感情を害さないように丁寧に言葉を選びながら伝えることです。

これはお客様に限らず、コミュニケーションにおいて、相手を立てる態度を忘れない事は大事です。
そして自分の言い分を伝えることも同等に大事です。

動かす際によく使用されている言語

2018-11-20

Java Script

jQuery
ParticleJS
Pixi.js
three.js
CreateJS

【パララックス効果】
・Skrollr
・FadeThis
・ScrollMe
・ScrollReveal.js
・wow.js

CSS

transform
transition
animation

HTML5

Canvas

SVG

WebGL

3D表現
例:java+canvas+WebGL

CSSについて

CSSトランジション

再生時間とタイミング程度の設定(transitionプロパティを使う)
主にロールオーバー効果(クリックすると何かが起きる)

CSSアニメーション

いつ何をどう変化させるか、という情報(キーフレーム)ををまとめた進行表のようなものを作る
例:開始0% 終了100%

参考サイト

commteブログ
animate.css
動くCSSのためのメモ

検索結果について

2018-11-20

検索結果は人によって違う。人それぞれ。

仮に、希望するキーワードで検索結果が1位でも、アクセス数が伸びるわけではない。
そのためキーワードは幅広く狙うのが基本になってきている。

パーソナライズ検索
ユーザーの興味や関心があることに合わせて検索結果をGoogleがカスタマイズしている。

シークレットモードで検索してみよう

パーソナライズされてない状態で検索してみる。

IE Control+Shift+P
Google chorome Control+Shift+N
Fire Fox Control+Shift+P
opera Control+Shift+N
Mac ControlをCommandにする

多くの人がそれぞれパーソナライズされた検索結果を見ていると考えられます。
そうなりますと、どれくらいの人が本当の順位を見ているのでしょうか?

実際のところ、狙うキーワードで順位を意識していればいいという時代はかなり前に終わっているといわれています。

なので、キーワードは幅広く狙って、キーワードを盛り込んだ積み重ねの記事、とどのつまりコンテンツ作成が大切です。

①WEB基礎知識

2018-11-12

Linux

コンピューターのOSはMacかWindows
サーバーコンピューターOS(基本ソフト)はオープンソースで開発された無料のLinux

サーバーを構築するにはLinuxOS上に必要なソフトをウエアをインストールする。
・ページを表示するための「Webサーバー」代表的なものは「Apache」
・データを管理するための「データベース」
・それらをコントロールするための「言語」
・メールサーバー

一般的にはこのような「Linux」にいろいろなものがインストールされた状態を一言で「サーバー」と呼んでいます。
「Apache」はクライアント(URL)からリクエストが来た時に、それにしたがってwebページを返す(表示する)のが仕事です。
このURLに書かれた文字列こそがApacheに対する命令になっているのだと覚えておく。

ブラウザとレンダリングエンジン

レンダリングエンジンによって、HTMLやCSSの解釈が異なる部分があるため、表示の結果が少しずつ異なる。
・Microsoft Internet Explorer→Trident
・Fire Fox →Gecko→ Servo?
・Google Chrome →Blink(基本的にwebkitに似た動き)→Webkit
・Safari →Webkit
・Opera →Blink→Webkit
IE10より
・Edge

http://www

【html】はプロコトル(規格)
  これはwebブラウザがHTTPというプロコトルに従って通信していることを示しています。
【www】はworld wide web
【FTP】はFile Transfer Protocol
【SMTP】はSimple Mail Transfer Protocol

HTML

webブラウザに対する指示
HTML・・・大文字・小文字問わない。 「P H1」
XHTML・・・小文字で記述することが定義されている。「p h1」

緩いルールのまま改定を重ねたHTML。もう一度ルールをしっかり定め直そうという動きによって策定されたのがXHTML
突然厳しいルールで作り変えるのは難しいと、利用されないのを予想して、段階をふむために3つの種類が準備された
・strict/ルールに忠実に
・Transition/HTMLの緩いルールが残った状態でもOK
・Frameset/XHTMLでは廃止された「フレーム」という要素を利用する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5

HTML5はHTML4の後継バージョンであるため、タグの記述ルールなどは厳格ではない。
たとえば、閉じタグを省略したり、単独タグにスラッシュが不要だったりなど、XHTMLで定義されていたルールは撤廃されている。

しかし、HTML5であってもXHTMLで定められたルールに沿って記述することが好ましい。

これを「XHTMLに準拠したHTML5」or「XHTML5」とよばれることもある。

②HTMLファイル記述の順番

2018-11-13

head内

※タイトルの前に文字コード設定
・CSSの↓にjavascript
 CSSもjavascriptも、後に書いた方が上書きするカタチになる。

①meta要素(文字コードの設定のみ)
②title
③meta要素
④link要素
⑤rel属性
・stylesheet
・shortcut icon
・canonical
・alternate
などなど
⑥script要素
⑦style要素
⑧object
➈その他

<!DOCTYPE html>
<html lang="ja">
<head>
<meta chareset="UTF=8">
<title>~</title>
<linl rel="stylesheet・・・>
</head>
<body>
</body>
</html>

③文字コード

2018-11-15

パソコンとサーバー間で起こっている現象

エディタソフト→ コンピューター内部→ webブラウザ
A B C 65 66 67 A B C

コード

ASCIIコード→JISコードに問題があると考えられた技術者などの手によって、改良が加えられた文字コード
shiftJisのWebページをEUCコード環境で閲覧しようとすると文字化けする。

ASCIIコード(アスキーコード) 英数字
JISコード 日本語
JISコード→「shiftコード」 日本語 マイクロソフトがかかわっていたため、Windowsで採用
JISコード→「EUCコード」 日本語 UNIXなどの1部のOSで採用
UTF8(ユニコード) ※特別な理由がない場合はUTF8を利用 1つの文字コードで世界中の文字が表現できることを目的として定められた国際標準規格

⑥データベース

2018-11-15

データベースとは

情報の蓄積・利用を簡単にする技術
webスクリプトと合わせて、使われることが多いのが「データベース」と呼ばれるシステムです。
DBは大量のデータを効率よく管理するための専用システムです。

DBの種類

Oracle Database(オラクルデータベース) 大規模なシステムを構築する場合に利用←高い!
Microsoft SQL Server(シークェル/エスキューエル) 主にWinndows Serverで構築された業務システムなどに利用される
MySQL(マイシークェル/マイエスキューエル) オープンソースとして開発された。多くのレンタルサーバーが標準で対応。
Postgre SQL(ポストグレスキューエル) MySQLのライバルともいえるオープンソースDB
SQLite 非常にコンパクトなDB。スマートフォンなどに内蔵されている。MySQLなどのように強力なことはできない。

オープンソースとは

スクリプトの内容(ソース)を公開しているアプリケーションのこと。
WordpressやEC-cubeなど。
通常は隠された状態で販売されており、解読および改造することは禁止されています。

WordPressとは

CMS(コンテンツ管理システム)とよばれるシステムの一種で、webサイトやプログラムなどを運営することができます。

サーバーサイドスクリプトで動作するCMSでは、Webサイトのコンテンツを保持・管理するために「データベース」が利用されるという仕組みになっている。

④CSSについて

2018-11-15

CSS記載方法

インラインCSS 各タグ内で指定するCSS。
※緊急的な対処とし、基本的には利用しない
埋込スタイルシート head内に<style>~</style>を記述する。
※例外的にそのwebページでだけ利用するようなスタイル
外部スタイルシート head内の記述が増えるため、外部ファイルとして別に管理する。
※基本的なスタイルの記述

CSSの優先順位

HTML記載の上から順に読み込むため、下に行けば行くほど優先順位度は高くなる
・外部ファイルCSS→head内CSS→インラインCSS
書き方にも左右される
(弱)h2<body h2(強)

メモ

idで命名したタグは1ページにつき、1回の使用可
classで命名したタグは何回でもOK
命名の仕方は「#mainText」よりは「#main-Text」が現在は一般的

⑤動かすWebスクリプト

2018-11-15

サーバーとの情報のやりとりはできないため、情報をサーバー上に保管したりは出来ない。

CGI サーバー
Java Script クライアントサイト・・・jQueryはライブラリの一種。
Java Scriptはwebブラウザというソフトウェアに対して動作する
Perl
PHP サーバー
Action Script クライアントサイド
JAVA ・アプレット技術/クライアントサイド
・サーブレット技術/サーバー
Ajax(エイジャックス) サーバー+クライアントサイド
Ruby on Rails(ルビー・オン・レイルズ) PHPに次いで、近年人気のあるサーバーサイドスクリプト。
クックパッドなどのサイトにも活用

メモ

スクリプト/小規模(プログラム)・・・さまざまなソフトウェアに対して動作する小さなプログラム

プログラム言語について

2018-11-20

【C】もっとも古い言語。多くの言語がC言語をベースに作られている。
【Ctt】C言語をさらに拡張した言語。
【Java】C/Cttをベースにして、SunMicrosystemsによって開発された。Androidなどに用いられる。
【C#】Microsoft社がJavaなどをベースに独自に開発した言語。
【Objective】Apple社がC言語を独自に拡張した言語。iPhoneやiPadアプリ開発に用いられる。

画像ファイルについて

2018-11-20

BMP・・・無圧縮
TIFF・・・無圧縮
png gif・・・可逆圧縮(イラスト向き)
jpeg・・・不可逆圧縮/元に戻らない(写真向き)

jpeg

ロゴやアイコン・イラストには向かない。
保存しなおすたびに、画質も劣化。
輪郭がかすれたり、色むらもおきやすい

検索結果が急に下がっちゃった時のチェック・調べ方

2018-11-13

クライアントさまのサイトが急激に検索結果が下落し、以下調べたときのものを記載。
ちなみに、クライアントさまの場合は①のグーグルからペナルティをもらっていたのが原因でした。
クライアントさまのサーバーが、ハッキングされていて勝手に怪しいフォルダが作成されていたんですね~汗汗
それらを削除して、グーグルに申請し直しましたら、元に戻りました!

ちなみにちなみに、グーグルからペナルティをもらってるかどうかについては
Google Search Console」に登録しておけば、わかります!・・・がわからない場合は以下を参考に。

考えられる原因①

ペナルティー
【ペナルティチェック】http://minnano-seo.com/essence/post90/
【ペナルティ診断と対処】http://minnano-seo.com/essence/post130/
【セーフブラウジングの確認】https://www.google.com/transparencyreport/safebrowsing/diagnostic/index.html#url=[調べたいサイトURL]

考えられる原因②

Googleのアルゴリズム(検索順位を決めるルール、のようなもの)のアップデート

考えられる原因③

【参考サイト】http://at-mag.co.jp/blog/?p=206

【引用です】
原因はタイトルの記述方法ということが明確に判明したわけです。

【変更前】 なんちゃらかんちゃらのうんちゃらほんちゃら|アットマガジンズ有限会社
  ↓
【変更後】 なんちゃらかんちゃらのうんちゃらほんちゃら|@MAG

そう、これだけだったのですが落ちました。ちょっと格好つけようと思ったんですよ。
アットマークは半角英数でした。

記号類を加えると落ちるのかな?と思いましたが、
同じアットマークでも全角のものは落ちるどころか1位に居たりします。推測ですが、タイトルへの記述に「半角記号」というのはあまり相性が良くないんだと思います。

HTMLを組んでる方なら経験があると思いますが、半角の&(アンドマーク)などは気をつけないと、
ソース上ではプログラムの一部と混同されてしまうときがあります。これと似た現象なのかも知れません。
タイトルには全角文字のみだけを使った方が、より正確にインデックスには認識されるみたいです。

考えられる原因④

【参考サイト】http://www.sem-r.com/sem/google/20030908000859.html

【引用です】
クローラーやサーバーに起因するWebページの未収集

「Google からの削除」ではなく「未収集」とした点に注意してください。
特定のページが削除できなかったのではなく、
ある時点で Google がインデックスできなかった為に消えてしまった、ということです。このような現象が起こるのは次の理由です。

(i) クローラーが訪れた時にサーバーがダウンしていた為にWebページ収集ができなかった
(ii) クローラーが訪れてリクエストを出したがサーバーの反応が遅くタイムアウトした
(iii) クローラー自体に起因する何らの問題で、特定のページ収集が行われなかった
(iv) インデックス情報構築時の何らかの問題で収集されたはずのページ情報が処理されなかった
(v) ページが既に消滅していた
(vi) ある一時点でのクロールにおいて特定のリンクが認識されなかった為にページ収集が行われなかった
(vii) ページ上のコンテンツまたはそのページへのリンク情報が大幅に更新されたことにより削除された

つまり、Webサイト管理者には何の責任もない、様々な要因によって引き起こされた結果だということです。
Google がサイト登録に関するページで述べている通り、Google クローラーは毎回のクロール時に必ずある特定のページをインデックスに登録することを保証しているわけではありません。
(i) や (ii) にあげたように、たまたまクローラーが訪れた時にネットワークやホスティングに起因する問題でWebページを収集することができない場合があるわけです。
また、あなた自身のWebページを収集したとしても、あなたのページに対してリンクを張っているWebページを収集しなければ、あなたのページに対する評価も変わりますので場合によっては (vii) の理由によりページが消えてしまう場合もあります。
さらに Google のクローラーは30億という膨大な量のWebページデータベースを構築しようとしているのですから、そのプロセスにおける様々な理由によりたまたまあなたのページがインデックスされないこともあるわけです。

あらゆるSEOを行っていても、検索順位を100%コントロールすることは不可能なのが悲しいところ。
それでも今まで上位表示していたものが、急に下落してしまった場合などは、何か原因があるはず?なので、対策を施したいところです。

最後に

グーグルに再審査リクエスト参考サイト

その他

・スパムリンクでライバルサイトの順位を落とすことは可能か

デスクトップの検索結果のみ自動ペナルティー?

2018-11-12

自分のサイトの1つが、ある日突然!
特定のキーワードで1ページ目から消えました。

1ページ目、2ページ目、3ページ目、、、探しても探しても見当たらない。。。。

スマホやipadではいつものように上位表示されている。
・・・な なぜ????∑(_□_;)ii

冷や汗がでる。。

放置していたら、スマホとipadの上位表示からも消えてしまうのだろうか・・・・?

グーグルの検索結果は、原因がみあたらなければ
数日後に戻ることもあるのだけれど、
怖くて、ま、待てない。。。

ということで、「検索結果が急に下がっちゃった時のチェック・調べ方」を再度見直し、チェックチェック。

グーグルウェブマスターにも登録しているのだけれど
そこにはペナルティーメールは何も届いてなかったので、自動ペナルティー?
・・・となると、やっかい。。。

モバイルフレンドリーをチェックしたり、セーフブラウジングを確認したり
タイトルを変更してみたり、、、思い当たること全部しつくしました。

・・・・結果。

3日後に、いつもの上位表示に戻りました!!!!
☆・゚:*(人´ω`*)ぅ。れ。し。ぃ。。

もしかしたら、何もしなくても元にもどったのかもしれないけれど
デスクトップの検索結果のみ、トップページがインデックスされてなかったので
たぶん、やっぱり自動ペナルティーを受けてたのだと思う;

ネットショップをはじめるいろいろな方法

2017-11-20

ネットショップをはじめるには以下の5つの方法があります

売り上げの規模と、自身にとっての必要な機能が備わっているかどうかが選択の目安になります。
月商0~2億程度であればASPを利用し、1,000万~2億であればパッケージ、2億以上であればフルスクラッチを利用といった感じでしょうか。
チェックしたい所、例えば:デザインは?お知らせ更新は?スマホ版は?クーポン・ポイント・レビュー機能は?販売手数料は?クレジット利用月額費用は? etc

ASP(レンタルカート)
費用相場:無料~
ネットショップ構築・運営に必要なサービスをレンタル。
※ASPの仕様に準じます
低コスト
機能・容量デザインの制限
※無料はECサイトとしての機能が不十分
【関連サイト】
BASE/STORS/FC2カート/ショップサーブ/メイクショップ/フューチャーショップ/アイシップ/たまごリピート/カラーミーショップ
無料カート比較
ショッピングカート比較(外部サイト)
外部ASP+ホームページ
費用相場:18万~
ネットショップ構築・運営に必要なサービスをレンタル。
※ASPの仕様に準じます
低コスト・デザインの自由度が高い・SEO効果高い
小規模向け
【関連サイト】
BASE/e-shopsカート2/SHOP Maker/エクスカート/easy myShop/カラーミーショップ
オープンソース使用
費用相場:50万~
デザインの自由度があり、やりたいことは大方実現できる。 自社サーバーでの運営/コストを抑えられる。
クレジットカード情報など漏洩した内容によっては損害賠償も必要になる場合もあり、
もはや個人情報の漏洩は大きな経営リスクとなりつつあるため、
特にクレジット決済導入希望の場合などは保守してくれるSE不在の個人運営は危険。
【関連サイト】
EC-cube・Welcart・woocommerce
サンプル画面(EC-cube) 
管理画面
(ID:admin/パスワード:password)
EC構築パッケージ
費用相場:200万~
EC構築に必要な機能がつまったパッケージソフト
ASPからのステップアップのために検討されることが多いシステム。
カスタマイズ可能
パッケージはシステムが古くなるという問題
【関連サイト】
EC-Orange/えびすマート/ecbeing/Commerce21/SI Webshopping/COMPANY-EC
フルスクラッチ
費用相場:1,000万~
0からの構築
機能やシステムを自分好みに設定することができる
細かい機能までつけることができる
費用と制作にかかる時間
【関連サイト】
スクラッチ開発

https移行の際のエラーと対処方法メモ

2017-11-13

私はヘテムルサーバーを使用していますが
今回「http」から「https」に移行の際に生じたエラーについての記載です。

ヘテムルは2017年10月より無料SSLが導入されましたが、一部ユーザーはSSLサーバーへ引越しをしなければ、使用できません。

そのため、すべてのデータをダウンロードして、SSLサーバーにアップロードしなければならないのですがその際のエラーです。

[状態] SSLサーバーに切り替えたとたんに、500エラーがでて、ログインも出来ない状態;
[原因] .htaccess記載のphpバージョンがエラー原因

【.htaccess】
-------------------------------------------------------------
AddHandler php5.3-script .php
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
-------------------------------------------------------------
ヘテムルは今回の移行に伴いphpを5.6~のphp7.0を標準としたため、5.3がエラー原因。

.htaccessを削除すると、各ページが404エラーになる原因になるため
.htaccessのphp5.3をphp5.6に書き換えてサーバーにアップでエラー解除。

最後にhttpsへのリダイレクトタグを.htaccessに追記記載して完了

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

PAGE TOP