naolin@Webデザイン勉強中

元社内翻訳家、英語講師の現専業主婦/二児の母/ 子どもの手が離れたら在宅ワークを…いう…

naolin@Webデザイン勉強中

元社内翻訳家、英語講師の現専業主婦/二児の母/ 子どもの手が離れたら在宅ワークを…いう夢を叶えるために、一念発起してWebデザインスクールに入校/ 2020年9月より、クリエイターズファクトリー オンラインコースを受講/ 受験を控え頑張る子供たちと、肩を並べて修行に励む予定

カフェサイトのコーディング④

昨日宣言したとおり、コーディングしたカフェサイトにcssとjQueryを使っていくつか動きをつけてみました。 まずはTOPページのメインビジュアルをスライダーに！３枚の画像が一定間隔でくるくると動きます。このページをデザインした際に、「オーストラリア人のご主人が開いていらっしゃるカフェ」という特徴をうまく掲載できなかったので、思い切ってスライダー画像の一枚をオーナーさんの写真にしてみました。以前整骨院のサイトを作った時にも感じたのですが、スライダーを使うと、画面も華やかにな

naolin@Webデ…

    • カフェサイトのコーディング③

      コンペに出すバナーを何点か仕上げてから、カフェサイトのコーディングの続きをしました。昨日と今日で、menuページとbeansページを一気に仕上げて、ひととおりPCバージョンの基本形は完成！これからレスポンシブ化して、余力があればインスタの表示部分にjQueryをつけて画像が横方向に流れるようにしていきたいところ。あと、基本形ができて安心していたのですが、ホバーやアニメーションもまだつけていなかったので、そういった工夫も施していかないと…。 jQueryは本当に久しぶりだから

      naolin@Webデ…

      • カフェサイトのコーディング②

        先日の続きでカフェサイトのコーディングの続きをしました。先日はTOPページをマークアップし、今日はその続きのnewsページに着手。ヘッダーとフッターは既にできていたので、メインビジュアルとコンテンツのグリッドレイアウトのところを作成していきました。 今回苦労したところはそれほどないのですが、一旦完成してコードを見直しているときに、グリッド部分のdivタグが多すぎるなぁと思い、一か所重複しているように見えた箇所をcssもろとも削除…すると、瞬時にレイアウトが崩れてしまい、それ

        naolin@Webデ…

        • カフェサイトのコーディング①

          先日デザインしたカフェサイトのコーディングに着手しました。スクールを卒業して以来、サイトのデザインだけ、もしくはコーディングだけにいくつか挑戦したのですが、今回は久々にデザインからコーディングまでひととおりやってみることに。 コーディングを始める前に、「ここはこういうふうなセクションにして、こういうタグをつけて」と少しイメトレしたのですが、今回はどういうわけか、しょっぱなのヘッダー部分がなかなかうまくいかず、mainタグに行きつくまでにかなり時間がかかってしまいました。今まで

          naolin@Webデ…

        カフェサイトのコーディング④

        naolin@Webデザイン勉強中

          書籍紹介のバナー①

          知人が執筆された出版物告知のためのバナーを作成しました。本の装丁に合わせた色をチョイスして、若い女性が好みそうなフォント、配色でまとめてみました。タイトルの一部である「47」という数字をどのように組み込もうかと悩みましたが、数字だけ入れても浮くような感じでしたので、丸の中に収めました。 ちなみに「ざんねんなスキンケア」というタイトルは、執筆された方のお子さんが「ざんねんな生き物事典」の大ファンで、そこから取られたそうです。なるほど、キャッチーなタイトルは書店でも目に留まりや

          naolin@Webデ…

          書籍紹介のバナー①

          naolin@Webデザイン勉強中

          カフェサイトのデザイン③

          先日から取り組んでいるカフェサイトのデザインがひととおり終わりました。今日手掛けたのは最後の"Beans"のページ。二つ前の"Menu"ページで、hotメニューとcoldメニューを差別化するために、coldに青系統の色を使ったのですが、このサイトでは少し浮いている気がして、最後のページはすべて暖色系でまとめました。ついでに浮いていると感じたmenuページの色も、トーンを少し抑えてみました。これが正解なのかどうかは分かりませんが、ちょっとしたことで、ページ全体の印象が少し落ち着

          naolin@Webデ…

          カフェサイトのデザイン③

          naolin@Webデザイン勉強中

          カフェサイトのデザイン②

          先日の続きで、カフェサイトの下層ページを2ページ作りました。ひとつはnewsページで、もうひとつはmenuページ。 工夫した点は…デザインには直接関係ないかもしれないのですが、商品の強みと特長を端的に盛り込んだ点と、海外からの観光客を呼び込みたいという案件設定を反映し、menuページに英語表記を加えた点。 今回白ベースのシンプルなページを初めて作りましたが、作っていて目に優しく、なんだかゆったりとした気分で作業ができました。サイト自体が和やかなアースカラーのカフェ、というの

          naolin@Webデ…

          カフェサイトのデザイン②

          naolin@Webデザイン勉強中

          カフェサイトのデザイン①

          久々にWebデザインの練習を…と思い、スクールの練習課題にあったカフェのTOPページをデザインしてみました。 白ベースでシンプルで分かりやすさ重視。スクロールは極力少なく…という案件設定でしたので、その要件をすべて満たすよう心掛けました。 これまでデザインしたサイトは多色使いのものばかり。はじめて白ベースのシンプルなものを手掛けましたが、余白の取り方によって印象がどんどん変わってくることを再認識。ほっとひと心地つけるカフェのサイトなので、ゆったりした空気感が少しでも出せればな

          naolin@Webデ…

          カフェサイトのデザイン①

          naolin@Webデザイン勉強中

          近況報告。

          次女の入学手続きの前半がひととおり終わり、日常が少しずつ戻ってきています。目下追われているのは、膨大な量の塾教材の後片付け。ちょうど今日がリサイクルごみの日だったので、6年分のたまりにたまったプリントやらテキストやらノートやらを、とにかく括りに括りまくりました。大変だったのが、クリアファイルにまとめていたプリントの処分。クリアファイルは再利用したかったので、ひとつひとつポケットから出しては括るの繰り返し。こうして排出したプリントやテキストの量…積み上げたら、実に本人の背丈の2

          naolin@Webデ…

          近況報告。

          naolin@Webデザイン勉強中

          年が明けて…

          年明けから娘の中学受験準備に追われていたため、本年はじめての投稿になってしまいました。今日無事に志望校から合格をいただき、ほっとした気持ちでパソコンに向かっています。 年が明けてからというもの、どうしても気持ちがWebデザインの方に向かない時もあったので、コーディングなど大きいことをやるのはやめて、illustratorの練習に隙間時間をあてていました。毎日少しずつでしたが、Udemyの講座や本などで、ひととおりillustratorの基礎を習得！ロゴや地図を作るのは、いい気

          naolin@Webデ…

          年が明けて…

          naolin@Webデザイン勉強中

          家具屋サイトのコーディング

          今年も残すところあと１日となりました。我が家は喪中、しかも２週間後に入試を控えた受験生がいるため、ひっそりと静かな年末を過ごしています。 簡単に済ませましたが大掃除も一応終わったので、これまでの復習として、スクール課題のひとつである「デスクワーク家具専門店サイトのコーディング」に取り組んでみました。 レスポンシブは未着手なのですが、PC版のだいたいのマークアップが終わったところです。最初は艱難辛苦であったコーディングも、慣れてきたらパズルみたいでなかなか楽しい！習いたて当初は

          naolin@Webデ…

          家具屋サイトのコーディング

          naolin@Webデザイン勉強中

          アップロード雑感。

          ポートフォリオサイトがいよいよ完成し、アップロードする運びとなりました。結果的にアップロードはできたのですが、いざアップしようとする段階でいろいろな問題に直面しまして。。。反省も踏まえて、アップロードまでの道のりを綴っていきたいと思います。 まず、我がポートフォリオサイト…当初のページ数より大幅に増えまして、結構ボリューミーな内容となったのです。これまで「すずらん整骨院」のアップロードには、無料のレンタルサーバーを契約して、お気楽にアップしていたのですが、うーむ、今回は何度

          naolin@Webデ…

          アップロード雑感。

          naolin@Webデザイン勉強中

          サイト構成の提案課題②

          前回女性専用パーソナルジムのワイヤーについての記事を投稿しましたが、メンターの先生からのフィードバックを経て修正を加えました。もともとこの課題は、ヒアリングシートに基づいて、クライアントの要件を満たすサイト構成とデザインを考えるというもの。要件としては、 ◆対象年齢：　25～40代女性 ◆無料体験に来てもらうことが目標 ◆「絶対」「100％」といった文言は控える。訴求が強すぎないように。

          naolin@Webデ…

          サイト構成の提案課題②

          naolin@Webデザイン勉強中

          サイト構成の提案課題

          ポートフォリオのフィードバックを待つ間、もう一つ課題に取り組んでみました。今期のスクール課題は全部で10個あり、課題8がポートフォリオデザイン、課題9がポートフォリオコーディング、そしてラストはサイト構成の提案。ポートフォリオコーディングまでたどり着いたので、最後に欲を出してコンプリートを目指すことに！ ラストの課題は、ズバリ「女性専用パーソナルジムのサイトマップとワイヤー制作」。ヒアリングシートのみが与えられている状況で、サイト構成を考えて、TOPページと下層１ページのワ

          naolin@Webデ…

          サイト構成の提案課題

          naolin@Webデザイン勉強中

          卒業制作②

          スクール受講の流れで、毎週金曜日に進捗状況を送って、土曜日の午前中はメンターサポート、というフローがすっかり自分の中で定着しておりましたが、メンターサポートも残すところあと１回となってしまいました。授業が終わるのも寂しかったですが、メンターサポートも毎週ざっくばらんな雰囲気で、先生にいろんなことをお聞きできたので、なくなってしまうのは大変残念です。 今日は、数週前から取り組んでいるポートフォリオサイトがいよいよ佳境に入ってきたので、デザイン面での最終チェックをしていただきま

          naolin@Webデ…

          卒業制作②

          naolin@Webデザイン勉強中

          最後の授業を終えて…。

          先週で通常のオンライン授業はひととおり終わり、昨日は特別編という形で転職・副業や実案件に関するお話をびっちり聞かせていただきました。 最後に先生が「伝えたいことは一応全部伝えられた」と話されたときは、「あぁ、これでもうコースも最後なんだなぁ」という寂しさと、「これからは独り立ちするために自ら行動していかないといけないなぁ」と奮起する気持ちとが入り混じり、いろいろな思いが交錯しました。 スクールには9月に入学し、ポートフォリオのコーディングがひととおり終わるまでの3か月間。あ

          naolin@Webデ…

          最後の授業を終えて…。

          naolin@Webデザイン勉強中