Webデザイン

webデザイナーの僕の行動指針

 

 

 

まとめ・結論

 

日々の思考

 

毎日寝る前に読書・視聴でアップデート(刃を研ぐ)

・「7つの習慣」+「ビジネス系Youtuber・読書」 (7つの習慣のみ→抽象的。具体例があまり浮かばん) 

 

物事の「仕組み(前提)」に疑問をもち、「なぜ?」と問いかける

 

 

行動指針

 

目標の立て方 【1日の作業の明確化】

・数値目標、具体的行動目標

 (参考:集中力を高めるコツ【月収1,000万の僕が、普段から意識すること】

数値目標

NG例)#今日の積み上げ プログラミング     

OK例)#今日の積み上げ HTMLの動画5本みる   

具体的行動目標

NG例)#今日の積み上げ 読書          #今日の積み上げ ブログのリサーチ 

OK例)#今日の積み上げ 移動時間は全て読書   #今日の積み上げ ブログの目次作成 

 

1.パーキンソンの法則→仕事の量は完成のために与えられた時間をすべて満たすまで膨張する

→・短めの締め切りを設定する・仕事を細かいタスクに分ける

 

 

学習方法

 

遅延評価型学習法

 

 

デザイン

 

そもそも「デザイン」とは何か

・整理

・コミュニケーション

・ひらめき

「カッコよく」「美しく」が目的じゃない。デザインの本質とは?

 

 

・無駄な勉強を省く

デザインも上達!WEBデザイン勉強法6ステップ

 

・デザインの比較を可視化する

→作業中は、Ctrl+Zだめ!横にどんどんバージョンを並べていく!

 

・常にゴールを意識する

→デザインは感覚的にしか伝えられない部分がある。同じ「かわいい」でも様々。

あなたのデザインが理解されない理由 / デザイン批評の始めかた | アドビUX道場 #UXDojo

 

 

デザイン

 

・デザインの比較を可視化する

具体例

→作業中は、Ctrl+Zで戻らない!横にどんどんバージョンを並べていく!

デザイナーが教える『誰でも絶対に今すぐデザインがうまくなる』方法

 

 

学習方法

 

遅延評価型学習法

「遅延評価」という言葉を調べてみると、「ある式を、その結果が本当に必要になる時点までは評価しないでおくテクニック」とあります。そのメリットは、「条件次第で捨ててしまうような値を事前に準備することは非効率的である。このような場合遅延評価を行うと必要なときだけ値が計算されるので計算量を低減できる」とありました。

ここから遅延評価勉強法とは、「その知識が必要になった時に初めて勉強する方法」です。もっと言えば、「○○を学んだから××をやってみる」ではなく、「××をやりたいから○○を勉強する」と定義できます。

ハッカーと遅延評価勉強法

 

 

静的htmlサイトのwordpress化で解決できたサイトまとめ

 

 

 

・まず、html化の方法がわからない

参考にしてできたサイト↓

フリーランスがwordpress制作で仕事ができるレベルになるには?コーディングも解説

 

【改訂版】02.WordPressテーマの動作を知れば、全体像が見えてくる

 

https://hikopro.com/html-wordpress/

 

https://www.amazon.co.jp/gp/customer-reviews/R2CAUU2PNSGTG9/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=4774173800

 

 

 

https://qiita.com/sararilfy/items/4784508f2bba09d93bb4

 

https://briarpatch.co.jp/wp-jquery

 

【エックスサーバー】ホームページがアップロードされない時の対処法

 

http://dorolog.com/wordpress_template_tag/

 

https://www.searchlight8.com/wordpress-twentyfifteen-style/

 

https://webtan.impress.co.jp/e/2010/03/09/7539

 

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

 

https://uxmilk.jp/20706

 

WordPressでCSSを追加する方法!ページの種類や記事ごとに個別で読み込みも可能

 

jQueryをWordPressで使う場合の読み込み方と使い方

 

PHPの文字化け対処法

 

WordPressでテーマ名の変更するやり方

 

最大アップロードサイズの限界に挑戦!上限はどこまで上げられるのか

 

「テーマのインストールに失敗しました」と表示される原因

 

https://webtan.impress.co.jp/e/2010/03/09/7539

 

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

 

 

 

・css反映されない

wordpressで変更したhtml、css、php等が反映されない時の対処法【5分】

 

http://mignonstyle.com/wordpress-template-file/

 

 

固定ページのテンプレートはpage.phpだけではありません

 

https://blog-tip.com/wordpress/slug/

 

https://www.yoheim.net/blog.php?q=20190105

 

 

・slick(jQueryプラグイン)の反映のさせ方が不明

参考にしたサイト↓

絶対解決!WordPressでslick.jsが動かない場合の対処法

 

 

【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

 

 

・slickを使うと、静的htmlの方ではcssが反映されるのになぜか反映されない。

結論、反映されていないcss(崩れているcss)のコードを丸々コピーすれば解決。(chrome検証ツールにて)

 

→まず、原因を突き止める。

今回は、cssが反映されておらず、jQueryについては正常に反映を確認した。

 

→静的htmlとコードを比較する

wordpressのサイトでエラーが出ているページ、または反映されていないページでも、

chrome検証ツールを使うとすぐに違いがわかる。

 

→cssのリンクは正常に動作を確認。しかし、cssが反映されない。。

リンクは間違いがない。エラーもなし。しかし、

cssが崩れている。。なぜかわからないまま長時間比較していた。

しかし、結論、

反映されていないcss(崩れているcss)のコードを丸々コピーすれば解決。(chrome検証ツールにて)

そんな簡単な方法があったのか。。と思ったのでメモ。

 

 

ざっと以上が参考になるサイト、というより

僕が実際に独学の知識でwordpress化に初めて成功した(書いている現在)時に非常に役立ったサイトでした。

もっと詳しく書けるのですが、今はそこに時間を割けないので割愛させてください。

ありがとうございました!

 

【InstanseEndEditable】Dreamweaverのコメントアウトが編集不可!?解決法はこれ!

 

こんにちは、@ふひっくすです。

 

今回は、Dreamweaverのコメントアウトが編集不可!?について紹介します。

 

 

まとめ! コードのどこかをクリックした状態(範囲選択しちゃダメです)で、「ツール」→「テンプレート」→「テンプレートから切り離す」で解決!

 

1.コードのどこかをクリックして、カーソル(入力する時に出る棒みたいなもの)を表示させてください。(コメントアウトしてない部分でもよし)

補足:この時、2文字以上を範囲選択しているとできませんので、範囲選択しないで行なってください。

↑例えば、こんな感じです。

この状態だと、「テンプレートから切り離す」が選べなくなって灰色の文字になってますよね、。

 

 

 

2.Dreamweaver左上のメニューにある、「ツール」をクリック

 

3.そのままカーソルを横()へ移動し、「テンプレートから切り離す」をクリック

 

これで普通のコードのように編集できるようになりましたよね!

 

 

 

 

HTMLやCSSがDreamweaverで反映されないたったこれだけの理由。。(笑)

 

こんにちは、@ふひっくすです。

 

苦戦してわかった自分なりの備忘録です。

 

 

理由。キャッシュが原因!ただそれだけだった。。

 

はい、キャッシュでした。。

どうみても、DreamWeaverでサイトのレイアウトは反映されてる。

 

しかし、なぜか(今開いてるブラウザで or 今使ってる端末で)←ココ超重要!!!

そのサイトへ行ってみるとめっちゃ表示が崩れてる!!とか反映されてない!!とか。

 

そう、原因は、キャッシュくんでした。

今開いてるブラウザはキャッシュ(過去のデータ?)がたまることでおかしくなります。

なので、違う端末か違うブラウザで同じサイトを開けばよいです。

 

僕の場合はパソコンで編集してたのを、スマホで開いたら反映されてました!

 

 

まとめ!

 

キャッシュ(過去のデータ?)がたまることで表示がおかしくなることがあります。

 

きちんとDreamweaverでは反映されているのに反映されない場合。

キャッシュに邪魔されない方法↓

 

違う端末、違うブラウザで同じサイトを開く

これで違っていたらキャッシュが原因です。

 

それでは~^^/

 

【イラレ】背景が透明でも反映されない!?対処法は?

 

 

こんにちは、@ふひっくすです。

 

今回は、イラストレーターで背景を透明にする方法について紹介します。

 

 

結論、「.png」にしてね!(「.gif」も可能です!)

 

ポン!と解決できた方法は、

書き出し形式を「.png」にするだけ!

よく使われる「.jpg」だと透明になりません!!

注意してね!^^;

 

それだけ・・!?

 

たぶん、みんな普通「.jpg」で保存するから

違いがわからないんよね(笑)

透明にしたいときは面倒だけど、「.png」で保存しちゃってください!^^

 

僕は、わからず迷っていて

「.png」で保存すればいいだけとは思いませんでした^^;(笑)

 

 

まとめ!

 

背景透明に対応している保存形式は主に以下です・・

png

gif

・psd(フォトショ)

・tif(マニアックなやつ)

 

書き出し形式を上の形式にするだけ!

よく使われる「.jpg」だと透明になりません!!

注意してね!^^;

 

知らなかったの自分だけかな?(笑)

 

それでは~^^/

 

【イラレ円グラフ】色が変えられない!対処法は?

 

こんにちは、@ふひっくすです。

 

今回は、イラストレーターの色変更について紹介します。

 

 

なぜ?色が変えられなくなった!

 

円グラフをつくっていたらなぜか!

色を変更してもグレーのままかわらない!モノクロ基準になってるし!

 

結論!「カラー」の項目を見直してみて!!

 

 

意図的に変えた覚えはない!

けど、「カラー」の項目で「K」の配色しか選択できないようになっています!

これが原因でした!(あっさり

 

これを今回は「RGB」へ戻したいと思います!

 

色変更の手順

 

1. 右上の「ハンバーグみたいなマーク」を選択!

 

2.グレースケールが選択されてしまっています!

これを以下のように「RGB(R)」に変更しましょう!!↓↓

 

 

選択出来たらRGBになっているか確認!!

 

3.その後、好きな色を選択してください。

無事に色が反映されましたね!^^

 

 

 

まとめ!

 

・「カラー」ウィンドウを表示させる→「RGB」などに変更する→任意の色を選択

以上で無事にカラーが反映されるようになりました!

 

なにかおかしいな・・?と思ったら設定を見直してみるのがいいですね♪

 

それでは~^^/

 

 

【FTP】サーバーのデータをダウンロードする方法を丁寧に!【XREAサーバー】

 

 

こんにちは、@ふひっくすです。

 

今回は、FTPでサイトのデータをダウンロードする方法について紹介します。

XREAという格安サーバー(かなりマイナー?)を使って解説します。

 

 

1. まず、ログインする

 

サーバー名がわかるとき、わからない時のログイン方法を紹介しますね。

 

サーバー名(数字)がわかるときの方法

 

1. XREAにアクセスして、右上のログインをクリックします。

 

2. アカウント名、パスワードを入力します。(サーバーを選択する必要がありますが、これを入力することですぐにサーバーページへ飛べます。)

 

 

サーバー名とは

 

 

XREAでいうサーバーの選択とは、「s(m・k)〇.xrea.com」(○の部分は数字4桁まで)のような「XREAに登録した時にもらえるドメイン」です。

 

この「XREAに登録した時にもらえるドメイン」を使ってもいいと思いますが、ほとんどの方は使わないと思います。

 

なので、ログイン時など、自分のサーバーがどこにあるのかを特定するために入力するのですな。(←そこまで詳しくない)

 

※パスワードを忘れた場合はコチラ

 

 

サーバー名(数字)が分からない場合のログイン

 

1. 上記の「サーバー」の選択項目がわかんない場合はコチラからログイン。

(value-domainに移動します。)

 

2. 左下の「ユーザー登録済みの方」に「ユーザー名」と「パスワード」を記入します。

(AmazonのIDで登録した方は、右側からログインしてください)

 

 

※パスワードを忘れた場合はコチラ

 

 

 

2. サイトの管理画面へ移動する(FTP)

 

サーバー名(数字)が分からない場合のログイン

 

1. まず、ログインすると、このような画面になります↓

 

 

 

 

2. 少し下に「管理情報(ご利用○年目)」というのがあります。

ここの、「管理サーバー」の横にある「XREA(○)」をクリック↓

 

 

 

3. すると、今契約してるドメインが表示されます。

ここから、データをダウンロードしたいドメインを確認します↓

 

 

サーバー情報に先ほどのs(m・k)〇.xrea.comが使われていますね!

(このように、サーバーを管理するのに必要になります。)

 

4. 「新コントロールパネル」をクリックします。

(旧コントロールパネルは、やってみましたが見づらくてよくわからないので、やめておきましょう。)

 

すると、なんだかブルー感漂う画面に!!↓

左のメニューにある「サイト設定」をクリック!

 

5. サイト設定の右に灰色のメニューがあります。

その中の「FTP設定」をクリック!↓

 

6. すると、右側に「FTP設定」と表示されます。

下の方にある、水色のボタン(ファイルマネージャー)をクリック!↓

 

 

3. サイトのデータ(ファイル)をダウンロードする

 

ここまできたら、いよいよサイトのファイルをダウンロードします!

初めてだとワクワクしますね笑

 

先ほどの水色のボタンを押すと、このようなページに飛びました↓

1. ダウンロードしたいファイルにチェックをつけます(こんな感じ)↓

 

2. 右上に表示されている、「ダウンロード」をクリック!(少し待っているとダウンロードが開始されます)

 

 

まとめ!

 

今回は、かなりマイナーなサーバーを使って紹介しました汗

どのサーバーでも基本的にやり方は同じなので、ぜひ参考にして見てください。

 

それでは〜^^/

 

【対処法】Adobe引き換えコードでインストールできない!

 

こんにちは、ふひっくすです。

 

あなたはAdobeの製品を引き換えコードでダウンロードする予定ではありませんか?

 

普通のやり方と違って、エラーが出たり反映されるのに時間がかかるので不便ですよね・・。

そんな時にオススメの方法を紹介します。

 

「すでにインストールされています」

 

「いや、インストールしてねぇから!」と言いたくなる。

これは、Adobeによるといくつかの原因があります。

 

  • 引き換えコードのエラー
  • 引き換えて日が浅い

 

Adobeとしてもこれぐらいしかサポートできないようです。

本当に何日経ってもライセンス版がインストールできない場合。

そんな時は以下の方法で試してみてください!

 

 

この方法でいけました!

 

コードを引き換えてからメールを確認してみると・・

こんなメールが!

 

 

やっぱいけたんかな!?と思ってこのメールの「今すぐスタート」をクリック↓

その時のリンクはこちらです。

 

そうすると、このようなページに飛びます↓

 

1. 右上でアカウントがログインされていることを確認

2. 中央左にある「creative cloud」をクリック

 

するとダウンロードできるページに飛びます↓

3. 「使用を開始する」をクリック

 

もうすでにやっている場合はエラーが表示されますが、

このあと「今すぐダウンロードを開始します…」みたいなのが出て

すぐにダウンロードが開始されます。

 

その後、creative cloudを開くと…

なにやら再読み込みされている模様。

 

そして読み込みが終わると、

 

このように、さっきまで体験版しか表示されなかったのに「インストール」の文字が…!!

 

やったー!成功です(^^)/

 

最後に僕の失敗パターンを載せておきますね。

 

僕の失敗談

 

コードを引き換えた後、早速やらかしてしまいました。

この画面の後、なんと他のボタンを押してしまいました・・・。

「今すぐ始める」ボタンが押せずに画面推移してしまったんです!

 

これはかなり特殊なパターンかもしれませんね(^^;)

なにやってんだか。。笑

 

その後、creative cloudでログインしても、「すでにインストールされています」としか表示されません!

 

そしてコードを何度か入力しても「このコードはすでに使用されています」と・・。

 

「どうすればいいんや!わからん!これは休日にAdobeに電話するしかない」

 

そう思って上記の方法でやってみたら…

無事ライセンス版をインストールできた!!

 

まとめ

 

大まかな流れをまとめます。

 

  • Adobeから数日後にメールが届いていないか確認
  • そこから上記の方法で「creative cloud」をダウンロード
  • 「creative cloud」が更新され、インストールできる

 

困った時は、数日様子をみてAdobeからのメールをチェック。

もしも引き換えコードがエラーだとしか考えられない場合はAdobeに問い合わせてみてください。

 

それでは〜^^/

 

【Webデザイン】独学の勉強方法を熟考してみる。

 

こんにちは、ふひっくすです。

Webデザインの独学での勉強方法なやみますよね。

 

そこで、いろんなサイトや書籍から勉強方法をまとめていこうと思います。

あくまで僕の備忘録的な記事になるとおもいますが、あしからず。。

 

Webデザインは何からはじめるか

 

まずはProgateで「HTML&CSS」をまなびました。

 

Progateで一番最初にやったのはRubyだった気がします。

まずは、いわゆる「プログラミング拒絶反応」をとることから始めました。

 

基礎の部分が一番挫折しやすいんですが、

そこを0から丁寧に教えてくれるので大変ありがたいサービスです。

 

スクールはどうするか

 

プログラミングスクールの「TechAchademy」と「侍エンジニア塾」の無料体験。

あと、「CodeCamp」も受けてみました。

 

侍エンジニア塾の無料体験、結構気に入ったんです。

そこからProgateでプログラミングの学習をはじめました。

 

しかし、無料体験だけです。さすがに10万も20万もするのでお金がなく…。

分割払いも未成年は親の許諾がいるのでやめました。

 

手順はどうするか…?

 

いろいろググってみると、

「まずは書籍から」「Progateから」

「ウェブサイトをトレースする」「バナーを模写する」

などの情報が出てきました。

 

備忘録として参考になるサイトを上げておきます。

 

全体の流れ

 

Webデザインを独学で3ヶ月以内にモノにする7ステップ勉強法

 

ポイント

  • 基礎を終えたら実践に移る。
  • 勉強みたく完璧を求めない。
  • とにかく手を動かす。「わからない部分(サイト完成などの目標)」のために勉強する(←勉強が「目的」にならないようにする)

 

冒頭の、自転車を例えたWebデザインの勉強の仕方が参考になりました。

いままでProgateで手を動かしたり、書籍をよんで少し見ないでコード打ったりもしてた。

でも、だんだん書籍が目標になってました。。

 

これからは書籍で勉強しつつ、実践的な内容をアウトプットしていきます。

大変参考になりました。

 

 

勉強法の方向性を見直す

 

Webデザイン初心者が独学で一気に上達する俺流勉強法

 

ポイント

  • インプットしたらすぐにアウトプットする
  • なにができるのかを知っておけば十分

 

インプットしたらすぐにアウトプットする癖(習慣)をつける。

そうすれば、インプットは有意義なものになるんですね、!!

 

考え方が参考になります。

 

 

具体的なデザインスキルアップの方法

 

https://isamuson.com/?p=1466

 

ポイント

  • 【流れ】いいサイトを見る→模写する→評価を受ける
  • 【手順】バナー模写→サイト模写
  • やっぱり続けることが大事!

 

かなり具体的に書いてあります。

模写をする部分についても、

いきなり「全部」模写するのは非効率で挫折率も高くなるというのは納得できる。

 

模写してほしい箇所は大きく分けて4つです。

  • ロゴ
  • ヘッダー・メニュー付近
  • メイン画像
  • サイドバー

目的は模写するのでは無く良いデザインを盗む事です。

全部模写していたら何時間もかかってしまう場合もあるので1〜2時間と自分の中で制限時間を決めて、その時間内で収まる様に模写する箇所を考えていきます。

 

また、バナーから始めるとよさそうです。

Webサイトの模写から初めても問題はなさそうですが、

抵抗を減らすためにバナーからはじめてもいいね!

 

最初からサイトを模写するのは時間もかかるし難しいと思うで、最初はバナーなどから模写していきましょう!

バナーはデザインの細かい部分が良く分かるので初心者の人にはオススメです。僕も最初はバナーのトレースから始まったので1ヶ月ぐらいバナーの模写をしてからサイトの模写に移る方が良いと思います。

 

 

バナー制作の具体例

 

https://isamuson.com/?p=1648

 

ポイント

 

  • 自分で考えてデザインを真似する
  • 並べて模写→最後に重ねる(違いを目視)
  • あまり深く考えない。質より量。

 

バナー制作するときの気をつけるべき点まで書いてありました!

その模写作品も公開されています。

これを参考にすすめていこう〜!!